/* V4.5.3: small-screen-first refinements and unobtrusive password controls. */
html { -webkit-text-size-adjust: 100%; }
.tb-pass-parent { position: relative !important; min-width: 0; }
.tb-pass-input { padding-right: 75px !important; min-width: 0; }
.tb-pass-toggle { position: absolute; right: 8px; bottom: 7px; z-index: 2; border: 0; background: rgba(236,245,240,.96); color: #18543d; font-size: 12px; font-weight: 800; cursor: pointer; padding: 6px 11px; min-width: 48px; min-height: 32px; border-radius: 9px; }
.tb-pass-toggle:hover { background: #dcefe5; }
.tb-pass-toggle:focus-visible { outline: 2px solid #2b916a; outline-offset: 2px; }
/* Place adjustment forms in task order, with a compact balance header. */
.v453-transactions { display: grid; gap: 13px; min-width: 0; }
.v453-finance-balance { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 16px; background: linear-gradient(110deg,#f0f9f4,#fcfdf8); border: 1px solid #d9ebe1; border-radius: 13px; }
.v453-finance-balance > span { font-weight: 800; letter-spacing: .055em; font-size: 11px; color: #497460; }
.v453-finance-balance strong { font-size: clamp(17px, 3vw, 24px); color: #146747; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.v453-finance-balance small { font-size: 12px; }
.v453-points-panel { background: #fff; border: 1px solid #e0eae4; border-radius: 15px; padding: 15px; box-shadow: 0 3px 10px rgba(20,65,40,.025); gap: 12px; min-width: 0; }
.v453-target-panel { background: #f8fcf9; border-color: #d3e9da; }
.v453-points-panel .form-section-heading { font-weight: 850; color: #21583e; font-size: 14px; }
.v453-transaction-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.v453-transaction-grid label { min-width: 0; }
.v453-transaction-grid input { width: 100%; min-width: 0; }
.v453-form-actions { display: flex; justify-content: flex-end; }
.v453-form-actions .btn { max-width: 100%; white-space: normal; }
.v453-points-panel .point-notify-option { padding: 9px 11px; font-size: 12px; min-width: 0; }
/* Order-history logo: no distorting/cropping brand content, framed consistently. */
.placement-history .placement-brand { flex: 0 0 54px; width: 54px; height: 54px; padding: 7px; background: #fff; border: 1px solid #dde9e2; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 12px rgba(34,100,68,.09); }
.placement-brand img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; border-radius: 5px; }
.placement-history { min-width: 0; align-items: center; }
.placement-history .history-body { min-width: 0; flex: 1 1 auto; }
.placement-history .history-title { font-size: 13.5px; overflow-wrap: anywhere; }
.placement-history .history-point-side { min-width: 0; }
.placement-history .history-points { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
/* Mobile webview and touch devices: prevent horizontal overflow, respect safe area. */
@media (max-width: 620px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .modal { padding: 0; }
  .modal-box { max-width: 100%; max-height: min(93dvh, 100vh); overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(22px, env(safe-area-inset-bottom, 0px)); }
  .modal-box input, .modal-box select, .modal-box textarea, .form input, .form select { font-size: 16px; max-width: 100%; }
  .v453-transaction-grid { grid-template-columns: 1fr; gap: 10px; }
  .v453-finance-balance { align-items: flex-start; flex-wrap: wrap; }
  .v453-points-panel { padding: 13px 12px; }
  .detail-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .sidebar { max-height: 100dvh; overflow-y: auto; }
  .main, .page, .modal-card { min-width: 0; }
  .modal-card { max-height: 95dvh; overflow: auto; }
}
@media (max-width: 380px) {
  .placement-history { gap: 8px; padding: 11px 9px; }
  .placement-history .placement-brand { flex-basis: 41px; width: 41px; height: 41px; padding: 5px; }
  .placement-history .history-title { font-size: 12px; }
  .placement-history .history-meta { font-size: 10.5px; }
  .placement-history .history-points { font-size: 11px; padding: 6px 7px; }
  .placement-history .history-point-side small { font-size: 9px; }
  .v453-finance-balance { padding: 10px; }
}
@media (min-width: 760px) {
  body:not(.login-body):has(.bottom-nav) { max-width: 560px; box-shadow: 0 0 60px rgba(15,63,48,.075); }
  body:not(.login-body):has(.bottom-nav) .modal-box { max-width: 560px; border-radius: 22px; margin-bottom: 18px; }
  body:not(.login-body):has(.bottom-nav) .modal { align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .modal-box { animation: none; } }