/* /resources/css/allaboutnumbers.css — styles for allaboutnumbers.html */

.eo-demo { margin-top: 28px; }
                .eo-demo-title { font-size: 0.95rem; font-weight: 700; color: #1565c0; margin: 0 0 12px; }
                .eo-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
                .eo-input {
                  width: 110px; padding: 8px 10px; border: 2px solid #90caf9;
                  border-radius: 7px; font-size: 1.05rem; font-weight: 700;
                  color: #1565c0; text-align: center; outline: none;
                  transition: border-color 0.2s, box-shadow 0.2s;
                }
                .eo-input:focus { border-color: #1565c0; box-shadow: 0 0 0 3px rgba(21,101,192,0.12); }
                .eo-input.eo-err { border-color: #e53935 !important; box-shadow: 0 0 0 3px rgba(229,57,53,0.15) !important; }
                .eo-cbtn {
                  padding: 8px 16px; border: none; border-radius: 7px;
                  font-size: 0.83rem; font-weight: 700; cursor: pointer;
                  transition: filter 0.15s, transform 0.12s;
                }
                .eo-cbtn:hover { filter: brightness(0.87); transform: scale(1.03); }
                .eo-cbtn-go   { background: #1565c0; color: #fff; }
                .eo-cbtn-rand { background: #ffe0b2; color: #e65100; border: 1.5px solid #ffb74d; }
                .eo-tip { font-size: 0.78rem; color: #aaa; }

                /* ── Verdict banner ── */
                .eo-verdict { display: none; text-align: center; padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; }
                .eo-verdict.eo-is-even { background: #e3f2fd; border: 2px solid #90caf9; }
                .eo-verdict.eo-is-odd  { background: #fff3e0; border: 2px solid #ffb74d; }
                @keyframes eoVIn { from { transform: scale(0.7) translateY(-8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
                .eo-verdict.eo-show { display: block; animation: eoVIn 0.42s cubic-bezier(0.34,1.56,0.64,1) both; }
                .eo-v-num { font-size: 2.6rem; font-weight: 800; line-height: 1; }
                .eo-v-lbl { font-size: 1.1rem; font-weight: 700; margin-top: 3px; letter-spacing: 0.07em; }
                .eo-v-sub { font-size: 0.83rem; color: #666; margin-top: 6px; }
                .eo-is-even .eo-v-num, .eo-is-even .eo-v-lbl { color: #1565c0; }
                .eo-is-odd  .eo-v-num, .eo-is-odd  .eo-v-lbl { color: #e65100; }

                /* ── Grid of pair-pods ── */
                .eo-grid { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 10px; min-height: 28px; }

                .eo-pod {
                  display: flex; align-items: center; gap: 3px;
                  padding: 4px 6px; border-radius: 8px;
                  border: 1.5px solid #90caf9; background: #e3f2fd;
                }
                .eo-pod.eo-lone { border-color: #ffb74d; background: #fff3e0; }

                .eo-dot { border-radius: 50%; background: #1e88e5; flex-shrink: 0; opacity: 0; }
                .eo-lone .eo-dot { background: #ef6c00; }

                .eo-slot {
                  border-radius: 50%; border: 2px dashed #ffb74d; flex-shrink: 0;
                  display: flex; align-items: center; justify-content: center;
                  color: #ffb74d; font-weight: 700; opacity: 0; transition: opacity 0.4s;
                }

                @keyframes eoPop   { 0%{transform:scale(0) rotate(-160deg);opacity:0} 68%{transform:scale(1.28) rotate(6deg);opacity:1} 100%{transform:scale(1) rotate(0);opacity:1} }
                @keyframes eoPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.38)} }
                .eo-dot.eo-p  { animation: eoPop 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards; }
                .eo-dot.eo-po { animation: eoPop 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards, eoPulse 0.6s ease-in-out 0.35s 3; }

                .eo-math { text-align: center; font-size: 0.88rem; font-weight: 600; color: #555; opacity: 0; transition: opacity 0.5s; margin-top: 2px; }
                .eo-math.eo-show { opacity: 1; }

                @media (max-width: 480px) { .eo-cbtn { padding: 7px 11px; font-size: 0.78rem; } }


.sieve-demo { margin: 20px 0 10px; }
                .sieve-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
                .sv-leg-item { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 600; color: #444; }
                .sv-leg-dot { width: 15px; height: 15px; border-radius: 3px; flex-shrink: 0; }
                .svl-1  { background: #e0e0e0; border: 1px solid #bdbdbd; }
                .svl-d2 { background: #bbdefb; border: 1px solid #64b5f6; }
                .svl-d3 { background: #ffe0b2; border: 1px solid #ffb74d; }
                .svl-d5 { background: #f3c6e2; border: 1px solid #f48fb1; }
                .svl-d7 { background: #e1bee7; border: 1px solid #ce93d8; }
                .svl-pr { background: linear-gradient(135deg,#fff176,#ffca28); border: 1px solid #ff8f00; }
                .sieve-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
                .sv-btn {
                  padding: 7px 12px; border: none; border-radius: 6px; cursor: pointer;
                  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em;
                  transition: filter 0.15s, transform 0.15s, box-shadow 0.15s, opacity 0.2s;
                }
                .sv-btn:disabled { opacity: 0.28; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; }
                .sv-btn:not(:disabled):hover { filter: brightness(0.88); }
                .sv-btn.sv-pulse { box-shadow: 0 0 0 3px rgba(0,0,0,0.18); transform: scale(1.04); }
                .sv-b2 { background: #bbdefb; color: #0d47a1; }
                .sv-b3 { background: #ffe0b2; color: #e65100; }
                .sv-b5 { background: #f3c6e2; color: #880e4f; }
                .sv-b7 { background: #e1bee7; color: #4a148c; }
                .sv-bp { background: linear-gradient(135deg,#fff176,#ffca28); color: #bf360c; border: 1px solid #ff8f00; }
                .sv-ba { background: #c8e6c9; color: #1b5e20; }
                .sv-br { background: #f0f0f0; color: #555; }
                .sieve-grid {
                  display: grid; grid-template-columns: repeat(10,1fr); gap: 3px;
                  max-width: 480px; margin: 0 auto 14px;
                }
                .sv-cell {
                  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
                  border-radius: 5px; font-size: 0.84rem; font-weight: 600;
                  background: #f7f7f7; border: 1px solid #e4e4e4;
                  position: relative; overflow: hidden; user-select: none;
                  transition: background 0.3s, color 0.3s, opacity 0.3s, transform 0.25s, box-shadow 0.3s, border-color 0.3s;
                }
                .sv-cell.sv-c1   { background: #e0e0e0; color: #9e9e9e; }
                .sv-cell.sv-d2   { background: #bbdefb; color: #1565c0; }
                .sv-cell.sv-d3   { background: #ffe0b2; color: #bf360c; }
                .sv-cell.sv-d5   { background: #f3c6e2; color: #880e4f; }
                .sv-cell.sv-d7   { background: #e1bee7; color: #4a148c; }
                .sv-cell.sv-out  { opacity: 0.55; text-decoration: line-through; }
                .sv-cell.sv-out::after {
                  content: ''; position: absolute; inset: 0; pointer-events: none;
                  background: repeating-linear-gradient(-45deg,transparent,transparent 4px,rgba(0,0,0,0.07) 4px,rgba(0,0,0,0.07) 5px);
                }
                .sv-cell.sv-ring { outline: 3px solid #2e7d32; outline-offset: -2px; z-index: 2; }
                .sv-cell.sv-prime {
                  background: linear-gradient(135deg,#fff176 0%,#ffca28 100%) !important;
                  color: #bf360c !important; border: 2px solid #ff8f00 !important;
                  box-shadow: 0 0 10px 2px rgba(255,193,7,0.55);
                  transform: scale(1.08); z-index: 1;
                  text-decoration: none !important; opacity: 1 !important; font-weight: 800;
                  outline: none !important;
                }
                @keyframes svElim { 0%{transform:scale(1.3)} 100%{transform:scale(1)} }
                @keyframes svPrime { 0%{transform:scale(0.6);opacity:0} 60%{transform:scale(1.15)} 100%{transform:scale(1.08)} }
                .sv-cell.sv-elim-anim { animation: svElim 0.25s ease-out; }
                .sv-cell.sv-prime     { animation: svPrime 0.4s ease-out forwards; }
                .sv-msg {
                  text-align: center; font-size: 0.88rem; font-weight: 500; color: #444;
                  background: #f0f4ff; border-radius: 8px; padding: 10px 14px;
                  max-width: 480px; margin: 0 auto 10px; min-height: 42px;
                  display: flex; align-items: center; justify-content: center;
                }
                .sv-result {
                  display: none; text-align: center; font-size: 0.84rem;
                  max-width: 480px; margin: 8px auto 0;
                  background: #fffde7; border: 1px solid #ffe082; border-radius: 8px; padding: 10px 14px;
                  color: #555; line-height: 1.7;
                }
                .sv-result strong { color: #e65100; }
                @media (max-width: 500px) {
                  .sieve-grid { max-width: 320px; gap: 2px; }
                  .sv-cell { font-size: 0.7rem; }
                  .sv-btn { padding: 6px 9px; font-size: 0.75rem; }
                }