.dice-sim-page { background: var(--surface-alt); }
.dice-sim-main { padding: 52px 0 88px; }
.dice-sim-container { max-width: 1280px; }
.dice-sim-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); margin: 24px 0; padding: clamp(20px, 3vw, 34px); }
.dice-sim-card h2 { font-size: clamp(1.45rem, 2.3vw, 2rem); margin-bottom: 12px; }
.dice-sim-alert { align-items: flex-start; background: #fff7e9; border: 1px solid #f4c476; border-left: 5px solid var(--accent); border-radius: var(--radius-md); color: #55350d; display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; padding: 18px 20px; }
.dice-sim-alert.compact { margin: 20px 0 0; }
.dice-sim-alert span { font-size: .9rem; }
.dice-sim-steps { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin-top: 24px; }
.dice-sim-steps div { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; }
.dice-sim-steps b { align-items: center; background: var(--accent); border-radius: 50%; color: white; display: flex; height: 28px; justify-content: center; margin-bottom: 12px; width: 28px; }
.dice-sim-steps strong, .dice-sim-steps span { display: block; }
.dice-sim-steps span { color: var(--text-secondary); font-size: .85rem; margin-top: 6px; }
.dice-sim-note { background: var(--surface-warm); border: 1px solid #f5dcc3; border-radius: var(--radius-sm); color: var(--text-secondary); margin-top: 20px; padding: 14px 16px; }
.dice-sim-card-heading { align-items: flex-start; display: flex; justify-content: space-between; gap: 20px; }
.dice-sim-card-heading .overline { margin-bottom: 6px; }
.dice-sim-controls { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px 0 10px; }
.dice-sim-controls label, .dice-sim-verify label { color: var(--text); font-size: .85rem; font-weight: 700; }
.dice-sim-controls select, .dice-sim-verify input { background: white; border: 1px solid #bdcbd3; border-radius: var(--radius-sm); color: var(--text); display: block; font: inherit; margin-top: 7px; padding: 11px 12px; width: 100%; }
.dice-sim-help { color: var(--text-secondary); font-size: .9rem; margin: 14px 0; }
.dice-sim-row-head, .dice-sim-row { align-items: center; column-gap: 10px; display: grid; grid-template-columns: 48px minmax(610px, 1fr) 130px 66px 80px 125px; text-align: center; }
.dice-sim-row-head { color: var(--text-muted); font-size: .68rem; font-weight: 700; letter-spacing: .06em; padding: 0 10px 8px; text-transform: uppercase; }
.dice-sim-rows { display: grid; gap: 9px; }
.dice-sim-row { background: #f8fbfc; border: 1px solid var(--border); border-radius: 10px; min-width: 1030px; padding: 10px; }
.dice-sim-rows { overflow-x: auto; padding-bottom: 6px; }
.dice-sim-bit-strip { display: grid; gap: 12px; grid-template-columns: repeat(11, minmax(42px, 1fr)); }
.dice-sim-bit label, .dice-sim-bit > span:first-child { color: var(--text-muted); display: block; font: 700 .66rem/1.2 ui-monospace, monospace; margin-bottom: 5px; }
.dice-sim-bit input, .dice-sim-checksum { align-items: center; background: white; border: 1px solid #aebfc8; border-radius: 7px; color: var(--primary-dark); display: flex; font: 800 1.05rem/1 ui-monospace, monospace; height: 40px; justify-content: center; padding: 3px; text-align: center; width: 100%; }
.dice-sim-bit input.is-invalid { border: 2px solid #bf2f2f; box-shadow: 0 0 0 2px #bf2f2f22; }
.dice-sim-checksum { background: var(--accent-light); border: 2px dashed var(--accent); color: var(--accent-hover); }
.dice-sim-row code { color: var(--primary-dark); font-size: .75rem; overflow-wrap: anywhere; }
.dice-sim-row [data-word] { color: var(--primary-dark); font-size: .82rem; }
.dice-sim-actions { display: flex; gap: 10px; margin-top: 20px; }
.dice-sim-button { background: var(--accent); border: 0; border-radius: 999px; color: white; cursor: pointer; font: 700 .9rem/1 Inter, sans-serif; padding: 12px 22px; }
.dice-sim-button:hover { background: var(--accent-hover); }
.dice-sim-button.secondary { background: white; border: 1px solid var(--primary); color: var(--primary-dark); }
.dice-sim-button.example { background: var(--primary-dark); }
.dice-sim-button.example:hover { background: #096f7b; }
.dice-sim-error { color: #a92323; font-size: .9rem; font-weight: 700; min-height: 1.5em; margin-top: 10px; }
.dice-sim-table-wrap { overflow-x: auto; margin-top: 18px; }
.dice-sim-table-wrap table { border-collapse: collapse; min-width: 680px; width: 100%; }
.dice-sim-table-wrap th, .dice-sim-table-wrap td { border-bottom: 1px solid var(--border); padding: 10px; text-align: left; }
.dice-sim-table-wrap th { color: var(--text-muted); font-size: .75rem; }
.dice-sim-verify { align-items: end; display: flex; gap: 12px; margin-top: 22px; }
.dice-sim-verify label { flex: 1; max-width: 430px; }
.dice-sim-summary { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); margin: 20px 0; }
.dice-sim-summary div { background: var(--surface-alt); border-radius: var(--radius-sm); padding: 14px; }
.dice-sim-summary strong, .dice-sim-summary span { display: block; }
.dice-sim-summary strong { color: var(--accent); font-size: 1.3rem; }
.dice-sim-summary span { color: var(--text-secondary); font-size: .8rem; }
.dice-sim-formula, .dice-sim-mnemonic { background: #102a34; border-radius: var(--radius-sm); color: #e9f8fb; overflow-wrap: anywhere; padding: 18px; }
.dice-sim-formula p + p { margin-top: 8px; }
.dice-sim-formula code { color: #ffbd67; }
.dice-sim-mnemonic { color: #8de4c4; font: 600 1rem/1.8 ui-monospace, monospace; margin-top: 18px; }
.dice-sim-addresses { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
.dice-sim-address-group { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; }
.dice-sim-address-group h4 { color: var(--accent); margin-bottom: 10px; }
.dice-sim-address-group div { border-bottom: 1px solid var(--border); padding: 8px 0; }
.dice-sim-address-group div:last-child { border-bottom: 0; }
.dice-sim-address-group code, .dice-sim-address-group span { display: block; font-size: .72rem; overflow-wrap: anywhere; }
.dice-sim-address-group span { color: var(--text-secondary); font-family: ui-monospace, monospace; }
.dice-sim-credit { color: var(--text-muted); font-size: .78rem; text-align: center; }
[hidden] { display: none !important; }
@media (max-width: 900px) { .dice-sim-steps { grid-template-columns: repeat(2, 1fr); } .dice-sim-addresses { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .dice-sim-main { padding-top: 30px; } .dice-sim-steps, .dice-sim-controls, .dice-sim-summary { grid-template-columns: 1fr; } .dice-sim-card-heading, .dice-sim-verify { align-items: stretch; flex-direction: column; } .dice-sim-row-head { display: none; } .dice-sim-card { padding: 18px 14px; } }