/* =======================
   Basis Styles
   ======================= */
body {
  margin: 0;
  padding: 0;
  width: 100% !important;
  font-family: Segoe UI, Arial, sans-serif;
  background-color: #fff;
  color: #333;
}

table { border-collapse: collapse; border-spacing: 0; }
img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

.logo-img {
  padding-left: 50px;
  display: block;
  margin: 0 auto;
  max-width: 360px;
  height: auto;
}

.card-container { padding: 0 30px 25px 30px; }
.card-label { color: #666; font-size: 13px; margin: 0; }
.card-value, .card-value-time { color: #28a745; font-weight: bold; font-size: 18px; }

.stack-button {
  display: block;
  width: 100%;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  box-sizing: border-box;
}

.button-td { width: 50%; padding: 5px; }

/* Buttons */
.stack-button-confirm { background: #28a745; color: #fff; }
.stack-button-cancel { background: #333; color: #fff; opacity: 0.35; }

/* =======================
   Responsive
   ======================= */
@media only screen and (max-width:480px){
  .stack-button { font-size: 14px; padding: 12px; }
  .button-td { display: block !important; width: 100% !important; padding: 5px 0 !important; }
  .text-td, .greeting-td { padding: 0 15px 15px 15px !important; font-size: 14px !important; }
  .logo-img { max-width: 300px; padding: 0;padding-left: 50px; }
}

@media only screen and (max-width:360px){
  .text-td, .greeting-td { padding: 0 12px 12px 12px !important; font-size: 12px !important; }
  .logo-img { max-width: 260px; padding: 0;padding-left: 30px;}
  .card-value, .card-value-time { font-size: 13px; }
  .card-label { font-size: 13px; }
  .stack-button { font-size: 13px; padding: 12px; }
}

/* =======================
   Dark Mode
   ======================= */
@media (prefers-color-scheme: dark) {
  body { background-color: #121212; color: #e0e0e0; }
  .main-table { background-color: #1e1e1e !important; }
  .header-td { background-color: #1a1a1a !important; }
  .title-td { color: #fff !important; }
  .greeting-td, .text-td { color: #e0e0e0 !important; }
  .card-label { color: #aaa !important; }
  .card-value, .card-value-time { color: #28a745 !important; }
  .stack-button-confirm { background: #28a745 !important; color: #fff !important; }
  .stack-button-cancel { background: #555 !important; color: #fff !important; opacity: 0.7 !important; }
  .footer-td { background-color: #262626 !important; color: #999 !important; }
  .divider-td { border-bottom: 2px solid #333 !important; }
  a { color: #28a745 !important; }
}