:root { color-scheme: light; font-family: system-ui, sans-serif; color: #321b13; background: #fffaf0; }
* { box-sizing: border-box; } body { margin: 0; } header { padding: 24px clamp(20px, 5vw, 80px); border-bottom: 1px solid #d4af58; } header img { width: 230px; max-width: 80%; } main { max-width: 1200px; padding: 40px 24px 80px; margin: auto; } h1, h2 { font-family: Georgia, serif; font-weight: 500; } h1 { font-size: clamp(30px, 5vw, 46px); } p { max-width: 850px; font-size: 16px; line-height: 1.65; } a { color: #6e341c; } .button { display: inline-flex; align-items: center; min-height: 48px; padding: 13px 23px; border: 1px solid #a8935c; border-radius: 24px; background: linear-gradient(135deg,#f3dda0,#d4af58); color: #321b13; text-decoration: none; font-weight: 650; } .stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(185px,1fr)); gap: 18px; margin: 30px 0; } .stats article { padding: 26px; border: 1px solid #d4af58; border-radius: 16px; background: #3f1d10; color: #fff6dc; } .stats strong { display: block; font-size: 36px; color: #f3dda0; } .stats span { font-size: 14px; } .note { font-size: 14px; color: #765640; } .actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin: 25px 0; } .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; background: white; } th, td { padding: 16px; border-bottom: 1px solid #e5d6b7; text-align: left; font-size: 15px; } th { background: #f4e4ba; } td { overflow-wrap: anywhere; } .delete { min-height: 44px; padding: 8px 14px; border: 1px solid #98533e; border-radius: 8px; color: #7a2313; background: white; cursor: pointer; } nav { display: flex; gap: 24px; padding: 24px 0; } :focus-visible { outline: 3px solid #a8935c; outline-offset: 3px; } @media(max-width:650px) { .stats { grid-template-columns: 1fr; } th,td { padding: 12px; } }