.photo-response { grid-column:1/-1; border-top:1px solid var(--line); padding-top:20px; font:400 .95rem/1.6 Inter,ui-sans-serif,system-ui,sans-serif; }
.response-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.heart-button,.comment-toggle,.reaction-submit,.moderation-action { font:inherit; cursor:pointer; }
.heart-button { display:inline-flex; align-items:center; gap:8px; color:var(--gold); background:transparent; border:1px solid var(--line); border-radius:99px; padding:8px 14px; }
.heart-button svg { width:20px; height:20px; fill:transparent; stroke:currentColor; stroke-width:1.5; }
.heart-button[aria-pressed=true] svg { fill:currentColor; }
.heart-button:hover,.reaction-submit:hover { background:rgba(223,181,126,.12); }
.heart-button:disabled { opacity:.5; cursor:wait; }
.comment-toggle { background:transparent; border:0; padding:8px 0; color:var(--muted); text-decoration:underline; text-underline-offset:4px; }
.comment-toggle:hover { color:var(--ink); }
.comment-form { margin-top:18px; max-width:560px; }
.comment-form label { display:block; margin-top:12px; color:var(--ink); }
.comment-form input,.comment-form textarea { display:block; width:100%; margin-top:6px; padding:11px 12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--night); font:inherit; box-sizing:border-box; }
.comment-form textarea { min-height:110px; resize:vertical; }
.comment-form input:focus,.comment-form textarea:focus { outline:2px solid var(--gold); outline-offset:2px; }
.comment-help,.response-status { color:var(--muted); font-size:.85rem; }
.reaction-submit,.moderation-action { margin-top:12px; padding:9px 16px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--gold); }
.response-status:empty { display:none; }
.photo-comments { padding:0; margin:16px 0 0; list-style:none; }
.photo-comment { padding:14px 0; border-top:1px solid rgba(223,181,126,.15); }
.photo-comment p { white-space:pre-wrap; overflow-wrap:anywhere; margin:6px 0 0; color:var(--muted); }
.comment-author { font-weight:500; color:var(--ink); }
.comment-date { color:var(--muted); font-size:.8rem; margin-left:10px; }
.comment-admin,.visitor-analytics { max-width:1116px; margin:24px auto; padding:24px; border:1px solid var(--line); border-radius:14px; color:var(--muted); }
.comment-admin summary,.visitor-analytics summary { cursor:pointer; color:var(--gold); }
.moderation-list { list-style:none; padding:0; }
.moderation-item { border-top:1px solid var(--line); padding:16px 0; }
.moderation-item p { white-space:pre-wrap; overflow-wrap:anywhere; }
.moderation-action { margin-right:10px; }
.analytics-intro { max-width:760px; }
.analytics-body { margin-top:24px; }
.analytics-metrics,.analytics-engagement { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.analytics-engagement { margin-top:12px; }
.analytics-metric { min-width:0; padding:17px 18px; border:1px solid rgba(223,181,126,.2); border-radius:12px; background:rgba(223,181,126,.035); }
.analytics-metric span { display:block; font-size:.8rem; }
.analytics-metric strong { display:block; margin-top:4px; color:var(--gold); font:400 1.8rem/1.2 Georgia,serif; }
.analytics-last { margin:16px 0; font-size:.9rem; }
.analytics-section { margin-top:28px; }
.analytics-section h3 { margin:0 0 14px; color:var(--ink); font:400 1.15rem/1.4 Georgia,serif; }
.analytics-bars { display:grid; gap:9px; }
.analytics-bar-row { display:grid; grid-template-columns:58px minmax(80px,1fr) 105px; gap:10px; align-items:center; font-size:.78rem; }
.analytics-bar-row b { color:var(--ink); font-weight:400; text-align:right; }
.analytics-track { height:8px; border-radius:99px; background:rgba(223,181,126,.1); overflow:hidden; }
.analytics-fill { display:block; height:100%; border-radius:inherit; background:var(--gold); }
.analytics-photo-list { list-style:none; padding:0; margin:0; }
.analytics-photo-list li { display:flex; justify-content:space-between; gap:20px; padding:10px 0; border-top:1px solid rgba(223,181,126,.15); }
.analytics-photo-list b { display:grid; gap:2px; color:var(--gold); font-weight:400; text-align:right; white-space:nowrap; }
.analytics-photo-list b span + span { color:var(--muted); font-size:.78rem; }
.size-quiz { max-width:1180px; margin:auto; padding:64px 32px 76px; display:grid; grid-template-columns:minmax(0,.8fr) minmax(320px,1.2fr); gap:56px; align-items:start; border-top:1px solid var(--line); }
.size-quiz h2 { margin:0 0 18px; font:400 clamp(2.3rem,4.8vw,4rem)/1.08 Georgia,serif; letter-spacing:-.035em; }
.size-quiz-copy > p:last-child { max-width:520px; color:var(--muted); }
.size-quiz-card { padding:28px; border:1px solid var(--line); border-radius:20px; background:#292127; box-shadow:0 18px 42px rgba(0,0,0,.14); }
.size-quiz-card label { display:flex; justify-content:space-between; gap:20px; margin:0 0 8px; color:var(--ink); }
.size-quiz-card label:not(:first-child) { margin-top:24px; }
.size-quiz-card output { color:var(--gold); font:400 1.25rem/1.3 Georgia,serif; }
.size-quiz-card input[type=range] { width:100%; accent-color:var(--gold); cursor:pointer; }
.size-quiz-card button { margin-top:26px; padding:11px 18px; border:1px solid var(--gold); border-radius:99px; color:var(--night); background:var(--gold); font:600 .9rem/1.3 Inter,ui-sans-serif,system-ui,sans-serif; cursor:pointer; }
.size-quiz-card button:hover { filter:brightness(1.08); }
.size-quiz-card button:disabled { opacity:.55; cursor:wait; }
.size-quiz-privacy { margin:14px 0 0; color:var(--muted); font-size:.78rem; }
.size-quiz-result { margin:22px 0 0; padding:18px; border-left:3px solid var(--gold); border-radius:0 10px 10px 0; color:var(--ink); background:rgba(223,181,126,.08); }
.size-quiz-back { display:inline-block; margin-top:16px; color:var(--gold); text-underline-offset:4px; }
.size-quiz-back:hover { color:var(--ink); }
.quiz-recent { list-style:none; padding:0; margin:0; }
.quiz-recent li { display:flex; justify-content:space-between; gap:20px; padding:10px 0; border-top:1px solid rgba(223,181,126,.15); }
.quiz-recent time { color:var(--muted); font-size:.8rem; }
.photo-open { position:relative; display:block; width:fit-content; max-width:190px; padding:0; border:0; border-radius:14px; background:transparent; color:inherit; cursor:zoom-in; overflow:hidden; justify-self:center; }
.photo-open .anatomy-photo { width:auto; max-width:100%; max-height:230px; object-fit:contain; }
.cast-photo-shell { width:fit-content; max-width:190px; justify-self:center; }
.photo-open::after { content:''; position:absolute; right:7px; bottom:7px; width:28px; height:28px; border:1px solid rgba(255,255,255,.38); border-radius:50%; opacity:.62; background-color:rgba(23,18,22,.62); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='5.5'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:15px; box-shadow:0 2px 10px rgba(0,0,0,.24); transition:opacity .18s ease,background-color .18s ease; animation:photo-zoom-flash 3.4s ease-in-out infinite; }
.photo-open:hover::after,.photo-open:focus-visible::after { opacity:1; background-color:rgba(23,18,22,.82); }
.photo-open.photo-seen::after { animation:none; }
@keyframes photo-zoom-flash {
  0%,22%,100% { opacity:.62; border-color:rgba(255,255,255,.38); background-color:rgba(23,18,22,.62); box-shadow:0 2px 10px rgba(0,0,0,.24); transform:scale(1); }
  7%,15% { opacity:1; border-color:rgba(255,255,255,.9); background-color:rgba(87,67,49,.82); box-shadow:0 0 0 6px rgba(223,181,126,.12),0 0 17px rgba(223,181,126,.42); transform:scale(1.08); }
}
@media(prefers-reduced-motion:reduce) { .photo-open::after { animation:none; } }
.photo-open:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.photo-lightbox { position:fixed; inset:0; width:100vw; max-width:none; height:100vh; height:100dvh; max-height:none; margin:0; padding:8px; border:0; border-radius:0; color:var(--ink); background:#0d0a0c; box-shadow:none; overflow:hidden; display:grid; grid-template-rows:minmax(0,1fr) auto; }
.photo-lightbox:not([open]) { display:none; }
.photo-lightbox::backdrop { background:rgba(9,6,8,.88); backdrop-filter:blur(4px); }
.photo-lightbox-close { position:absolute; z-index:2; top:max(10px,env(safe-area-inset-top)); right:max(10px,env(safe-area-inset-right)); display:grid; width:40px; height:40px; padding:0; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:50%; color:#fff; background:rgba(23,18,22,.7); font:300 1.75rem/1 Inter,ui-sans-serif,system-ui,sans-serif; cursor:pointer; backdrop-filter:blur(8px); }
.photo-lightbox-image-shell { position:relative; display:block; width:100%; height:100%; max-height:none; overflow:hidden; border-radius:0; }
.photo-lightbox-image { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; max-height:none; border-radius:0; object-fit:contain; }
.photo-lightbox-footer { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); border-top:1px solid rgba(255,255,255,.12); background:#0d0a0c; }
.photo-lightbox-caption { margin:0; color:var(--gold); font-size:.78rem; white-space:nowrap; }
.photo-lightbox-prompt { margin:0; color:rgba(255,255,255,.82); font-size:.86rem; text-align:center; }
.photo-lightbox-actions { display:flex; align-items:center; gap:8px; }
.photo-lightbox-heart,.photo-lightbox-reaction { min-height:38px; padding:8px 12px; border:1px solid rgba(255,255,255,.24); border-radius:99px; color:#fff; background:rgba(255,255,255,.06); font:500 .8rem/1 Inter,ui-sans-serif,system-ui,sans-serif; cursor:pointer; white-space:nowrap; }
.photo-lightbox-heart { display:inline-flex; align-items:center; gap:7px; color:var(--gold); }
.photo-lightbox-heart svg { width:18px; height:18px; fill:transparent; stroke:currentColor; stroke-width:1.5; }
.photo-lightbox-heart[aria-pressed=true] svg { fill:currentColor; }
.photo-lightbox-heart:disabled { opacity:.5; cursor:wait; }
.photo-lightbox-heart:not(:disabled):hover,.photo-lightbox-reaction:hover { background:rgba(223,181,126,.14); }
.analytics-empty { margin:0; }
[hidden] { display:none!important; }
button:focus-visible,summary:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
@media(max-width:760px) { .comment-admin,.visitor-analytics { margin:20px; padding:20px; } .response-actions { gap:14px; } .analytics-metrics,.analytics-engagement { grid-template-columns:repeat(2,minmax(0,1fr)); } .analytics-bar-row { grid-template-columns:50px minmax(55px,1fr) 92px; gap:8px; } .analytics-photo-list li { align-items:start; } .analytics-photo-list b { white-space:normal; } .size-quiz { padding:52px 20px; grid-template-columns:1fr; gap:24px; } .size-quiz-card { padding:22px 18px; } .photo-open,.cast-photo-shell { max-width:145px; } .photo-open .anatomy-photo { max-height:180px; } .photo-lightbox-footer { grid-template-columns:1fr; gap:8px; justify-items:center; padding-top:8px; } .photo-lightbox-caption { display:none; } .photo-lightbox-prompt { font-size:.8rem; } .photo-lightbox-heart,.photo-lightbox-reaction { min-height:36px; padding:7px 11px; } }