.sheet--count .sheet-inner { max-width:1100px; }
.sheet--count .sheet-body { padding-top:20px; }
.sheet--count .bar { z-index:2; }
.roll-counter { --roll-blue:#168fff; --roll-red:#f13d58; color:var(--ink); text-align:left; }
.roll-notice-overlay { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:rgba(15,22,27,.58); }
.roll-notice-overlay[hidden] { display:none; }
.roll-notice { width:min(100%,440px); padding:28px; border:1px solid var(--line); border-radius:16px; background:var(--bg); box-shadow:0 18px 60px rgba(0,0,0,.2); color:var(--ink); text-align:left; }
.roll-notice h3 { margin:0 0 14px; font-size:20px; }
.roll-notice p { margin:0; font-size:16px; line-height:1.8; }
.roll-notice-actions { display:flex; justify-content:flex-end; margin-top:28px; }
.roll-notice-actions button { min-height:42px; padding:8px 20px; border:0; border-radius:9px; background:var(--accent); color:var(--bg); font:inherit; cursor:pointer; }
.roll-notice-actions button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.roll-counter [hidden] { display:none !important; }
.roll-counter *, .roll-counter *::before, .roll-counter *::after { box-sizing:border-box; }
.roll-counter button,.roll-counter select { font:inherit; }
.roll-counter button { min-height:42px; padding:9px 14px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); cursor:pointer; transition:background .15s,border-color .15s; }
.roll-counter button:hover:not(:disabled) { border-color:var(--accent); background:var(--accent-bg); }
.roll-counter button:focus-visible,.roll-counter select:focus-visible,.roll-counter summary:focus-visible,.roll-canvas:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.roll-counter button:disabled { cursor:default; opacity:.45; }
.roll-heading { margin-bottom:18px; }
.roll-local-badge { display:inline-flex; padding:6px 10px; border-radius:7px; background:var(--accent-bg); color:var(--accent); font-size:12px; font-weight:600; letter-spacing:.06em; }
.roll-heading p { margin:10px 0 0; color:var(--ink-soft); font-size:14px; line-height:1.7; }
.roll-source-options { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.roll-source-options button { min-height:110px; padding:14px 10px; border-style:dashed; font-size:17px; text-align:center; }
.roll-source-options span { display:block; margin-bottom:4px; color:var(--accent); font-size:26px; line-height:1.2; }
.roll-source-options small { display:block; margin-top:6px; color:var(--ink-soft); font-size:12px; line-height:1.5; }
.roll-status { min-height:48px; margin:0; padding:14px 0; color:var(--ink-soft); font-size:13px; line-height:1.65; overflow-wrap:anywhere; }
.roll-camera { margin:0 0 18px; }
.roll-camera video { display:block; width:100%; max-height:65vh; border:1px solid var(--line); border-radius:12px; background:#101317; object-fit:contain; }
.roll-camera-actions { display:flex; justify-content:center; gap:10px; margin-top:12px; }
.roll-camera-actions [data-action="shoot"] { min-width:120px; border-color:var(--accent); background:var(--accent-bg); color:var(--accent); font-weight:600; }
.roll-workspace { min-width:0; }
.roll-photo-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; }
.roll-file-name { min-width:0; overflow:hidden; color:var(--ink-soft); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.roll-photo-bar>div { display:flex; flex-shrink:0; align-items:center; gap:8px; }
.roll-photo-bar button { min-width:36px; min-height:36px; padding:4px 9px; font-size:18px; }
.roll-zoom-value { min-width:42px; color:var(--ink-soft); font-size:12px; text-align:center; font-variant-numeric:tabular-nums; }
.roll-image-stage { width:100%; max-height:72vh; overflow:auto; overflow-anchor:none; overscroll-behavior:contain; border:1px solid var(--line); border-radius:12px; background:#101317; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.roll-canvas { display:block; width:100%; max-width:none; height:auto; cursor:crosshair; touch-action:pan-x pan-y pinch-zoom; }
.roll-workspace[aria-busy="true"] .roll-canvas { cursor:wait; }
.roll-legend { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:14px; font-size:13px; }
.roll-legend>span { display:inline-flex; align-items:center; gap:7px; }
.roll-dot { display:inline-block; width:11px; height:11px; flex-shrink:0; border-radius:50%; }
.roll-dot--auto { background:var(--roll-blue); }
.roll-dot--manual { background:var(--roll-red); }
.roll-edit-help,.roll-counted-note { margin:10px 0 0; color:var(--ink-soft); font-size:13px; line-height:1.75; }
.roll-results { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin:22px 0 18px; padding:20px 0; border:1px solid var(--line); border-radius:12px; text-align:center; }
.roll-results>div+div { border-left:1px solid var(--line); }
.roll-results span,.roll-results small { display:block; color:var(--ink-soft); font-size:13px; }
.roll-results strong { display:block; margin:4px 0 7px; color:var(--ink); font-size:46px; font-weight:500; line-height:1.2; font-variant-numeric:tabular-nums; }
.roll-results .roll-current-count { color:var(--roll-blue); }
.roll-primary-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.roll-counter .roll-primary { border-color:var(--accent); background:var(--accent-bg); color:var(--accent); font-weight:600; }
.roll-counted-note { margin-top:12px; }
.roll-options { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; margin:20px 0; padding-top:18px; border-top:1px solid var(--line); }
.roll-options>button { font-size:13px; }
.roll-marker-details,.roll-training { padding:14px 0; border-top:1px solid var(--line); font-size:13px; }
.roll-counter summary { width:fit-content; max-width:100%; padding:4px 0; color:var(--ink); line-height:1.5; cursor:pointer; }
.roll-marker-list { display:flex; flex-wrap:wrap; gap:8px; padding-top:14px; }
.roll-marker-list>span { color:var(--ink-soft); }
.roll-marker-list button { min-height:36px; padding:6px 10px; font-size:12px; }
.roll-marker-list .roll-marker-auto { color:var(--roll-blue); }
.roll-marker-list .roll-marker-manual { color:var(--roll-red); }
.roll-training>div { display:flex; flex-wrap:wrap; gap:10px; }
.roll-training button { font-size:13px; }
@media(max-width:560px) {
  .sheet--count .sheet-body { padding:18px 14px 36px; }
  .roll-source-options { gap:10px; }
  .roll-source-options button { min-height:104px; font-size:16px; }
  .roll-source-options small { font-size:11px; }
  .roll-photo-bar { gap:8px; }
  .roll-photo-bar>div { gap:5px; }
  .roll-image-stage { max-height:65vh; border-radius:9px; }
  .roll-primary-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .roll-results { margin-top:18px; padding:18px 0; }
  .roll-results strong { font-size:40px; }
  .roll-results small { font-size:12px; }
  .roll-options>button { flex:1; }
}
@media(prefers-reduced-motion:reduce) { .roll-counter button { transition:none; } }