.letter-hero-section {background: linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);}
.letter-hero-section .display-1 {font-size: 6rem;line-height: 1;text-shadow: 2px 2px 0 rgba(13,110,253,.2);}
@media (max-width: 767.98px) {.letter-hero-section .display-1 {font-size: 4rem;}}
.letter-hero-section .card {border-radius: 1rem;border: none;box-shadow: 0 10px 30px rgba(0,0,0,.1) !important;}
.letter-hero-section .rule-letter-table {font-size: .95rem;}
.letter-hero-section .rule-letter-table th {background-color: #e9ecef;font-weight: 600;color: #1e293b;}
.letter-hero-section .rule-letter-table td {vertical-align: middle;padding: 1rem .75rem;}
.letter-hero-section .rule-letter-table code {background-color: #f1f5f9;color: #0d6efd;padding: .2rem .4rem;border-radius: .25rem;font-size: .9em;font-weight: 500;}
.letter-hero-section .rule-letter-table sup {color: #dc3545;font-size: .7rem;}
.letter-hero-section .rule-letter-table tr:hover {background-color: #f1f5f9;}
.letter-hero-section .alert-warning {background-color: #fff3cd;border-color: #ffecb5;color: #856404;border-radius: .75rem;}
.letter-hero-section .alert-warning ul {margin-left: 1rem;}
.letter-hero-section .btn-outline-primary {transition: all .2s ease;}
@media (hover: hover) {.letter-hero-section .btn-outline-primary:hover {transform: translateY(-2px);box-shadow: 0 5px 10px rgba(13,110,253,.2);}}
@media (max-width: 767.98px) {.letter-hero-section .display-1 {font-size: 3rem;}
	.letter-hero-section .rule-letter-table {font-size: .85rem;}
	.letter-hero-section .rule-letter-table td {padding: .75rem .5rem;}
	.letter-hero-section .d-flex.justify-content-between .btn {padding: .3rem .6rem;font-size: .85rem;}
	.letter-hero-section .d-flex.justify-content-between .btn i {font-size: .8rem;}}