.pricing-value-grid,.home-example-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:2rem 0; }
.home-example-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pricing-value-grid article,.home-example-card { padding:1.4rem; background:var(--card); border:1px solid var(--border); border-radius:14px; display:flex; flex-direction:column; gap:.65rem; }
.pricing-value { color:var(--accent); font-size:1.65rem; font-weight:800; }.pricing-value-grid h2 { margin:0; font-size:1.05rem; }.pricing-value-grid p,.home-example-card p { font-size:.85rem; color:var(--ink-soft); line-height:1.6; margin:0 0 .4rem; }.pricing-value-grid a { margin-top:auto; }.credit-packs-title { font-size:1.2rem; margin-top:2rem; }
#siteRefineDialog { width:min(1180px,96vw); }#thumbRefinement>.grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
#thumbRefinement>.actions:empty { display:none; }
#thumbCancel:disabled,#thumbRestore:disabled { display:none; }
dialog#siteRefineDialog>.site-dialog-toolbar { position:sticky; top:-1.2rem; z-index:3; padding:.6rem 0; background:var(--card); }
.review-controls { display:flex; gap:1rem; flex-wrap:wrap; align-items:end; margin:1rem 0; }.review-controls>label:first-child { width:150px; }.review-controls>button { margin-left:auto; }#thumbRefinement>.grid:empty { display:none; }
.arrangement-goals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin:1rem 0; }.arrangement-goals button { display:flex; flex-direction:column; align-items:start; text-align:left; gap:.4rem; padding:1rem; border-radius:12px; }.arrangement-goals button span { font-size:.77rem; line-height:1.5; color:var(--ink-soft); font-weight:400; }.arrangement-goals button[aria-pressed=true] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--panel-soft); }
.arrangement-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; margin:1rem 0; }.arrangement-stats>div { padding:.85rem; border:1px solid var(--border); border-radius:10px; background:var(--panel-soft); }.arrangement-stats strong,.arrangement-stats span { display:block; }.arrangement-stats strong { font-size:1.3rem; }.arrangement-stats span { font-size:.75rem; color:var(--ink-soft); margin-top:.25rem; }
.review-empty { padding:1.4rem; border:1px dashed var(--border); border-radius:12px; color:var(--ink-soft); font-size:.85rem; }.review-guidance,.review-listen-status { font-size:.83rem; line-height:1.6; color:var(--ink-soft); }
.passage-review-grid { display:grid; grid-template-columns:185px minmax(0,1fr); gap:1rem; margin:1rem 0; }.passage-list { max-height:600px; overflow:auto; display:flex; flex-direction:column; gap:.5rem; }.passage-list button { padding:.85rem; text-align:left; border-radius:10px; }.passage-list strong,.passage-list span { display:block; }.passage-list span { font-size:.72rem; margin-top:.3rem; color:var(--ink-soft); }.passage-list button[aria-pressed=true] { border-color:var(--accent); background:var(--panel-soft); }
.passage-detail { min-width:0; padding:1rem; border:1px solid var(--border); border-radius:12px; }.passage-detail h3 { margin:0 0 .5rem; }.passage-detail canvas { display:block; width:100%; max-height:320px; aspect-ratio:16/9; object-fit:contain; border-radius:10px; background:var(--panel-soft); margin-top:.75rem; }.passage-changes { list-style:none; padding:0; margin:.8rem 0; max-height:270px; overflow:auto; }.passage-changes li { padding:.65rem 0; border-top:1px solid var(--border); }.passage-changes strong { font-size:.8rem; }.passage-changes p { font-size:.77rem; line-height:1.5; color:var(--ink-soft); margin:.3rem 0 0; }.thumb-calibration>label { margin:.8rem 0; }
.home-example-section { margin:2.5rem auto; max-width:1200px; }.home-example-section h2 { font-size:1.2rem; }.home-example-section>p { color:var(--ink-soft); font-size:.85rem; }.home-example-card h3 { margin:0; }.home-example-card small { color:var(--accent); font-weight:700; }.home-example-card button { margin-top:auto; }
@media(max-width:800px){.pricing-value-grid,.home-example-grid,.arrangement-goals { grid-template-columns:minmax(0,1fr); }.arrangement-goals button { padding:.8rem; }.arrangement-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.passage-review-grid { grid-template-columns:minmax(0,1fr); }.passage-list { flex-direction:row; max-height:none; overflow-x:auto; }.passage-list button { min-width:145px; }.passage-detail { padding:.8rem; }}
