:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.global-debt-body { margin: 0; min-width: 320px; color: #17272a; background: #293335 url('/usdebt-background.avif') center top / cover fixed no-repeat; }
.global-debt-app { width: min(1500px, 100%); margin: 0 auto; padding: 16px; }
.global-debt-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 12px 16px; border: 2px solid #82908c; border-radius: 6px; background: rgba(246, 247, 241, 0.78); box-shadow: 0 4px 0 #111a1b; }
.global-debt-brand, .global-debt-home { display: inline-flex; align-items: center; gap: 8px; color: #1d3437; font-weight: 800; text-decoration: none; }
.global-debt-brand span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 6px; background: #ef1e4f; color: #fff; }
.global-debt-home { justify-self: end; color: #155e67; }
.global-debt-home:hover, .country-row-link:hover { text-decoration: none; }
.global-debt-title { text-align: center; }.global-debt-title p { margin: 0; color: #536765; font-size: 12px; font-weight: 700; }.global-debt-title h1 { margin: 2px 0 0; color: #075d49; font-size: 25px; line-height: 1; }
.global-debt-hero { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-top: 14px; padding: 16px 18px; border: 2px solid #6c8580; border-radius: 6px; background: rgba(240, 244, 239, 0.76); box-shadow: 0 3px 0 rgba(3, 16, 18, 0.7); }.global-debt-hero h2 { margin: 6px 0 0; font-size: 27px; }.global-debt-hero > p { max-width: 430px; margin: 0; color: #415a59; font-size: 13px; text-align: right; }
.global-debt-live { margin: 0; color: #4e5e59; font-size: 11px; font-weight: 800; }.global-debt-live i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #24bb74; box-shadow: 0 0 0 3px rgba(36, 187, 116, 0.2); }
.region-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 13px 0; }.region-nav a { padding: 7px 13px; border: 1px solid #8d9b95; border-radius: 5px; background: rgba(250, 251, 246, 0.82); color: #21494a; font-size: 13px; font-weight: 800; text-decoration: none; }.region-nav a:hover { background: #fff; color: #a11220; }
.debt-region { margin-top: 14px; padding: 11px; border: 2px solid rgba(87, 111, 107, 0.85); border-radius: 6px; background: rgba(238, 242, 236, 0.7); box-shadow: 0 3px 0 rgba(5, 15, 17, 0.66); }.region-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; padding: 6px 10px; border: 1px solid #1b6d5a; border-radius: 4px; background: rgba(9, 92, 72, 0.9); color: #fff; }.region-heading h2, .region-heading p { margin: 0; }.region-heading h2 { font-size: 19px; }.region-heading p { font-size: 12px; }
.country-list { display: grid; gap: 6px; }.country-row { display: grid; grid-template-columns: minmax(170px, 1.15fr) repeat(3, minmax(150px, 1fr)); align-items: center; gap: 8px; min-height: 66px; padding: 7px 10px; border: 2px solid #71817f; border-radius: 6px; background: rgba(251, 252, 248, 0.9); box-shadow: inset 0 0 0 1px #fff, 0 2px 0 #283635; }.country-row-link { border-color: #b51727; color: inherit; text-decoration: none; }.country-row-link:hover { background: #fffaf9; box-shadow: inset 0 0 0 1px #fff, 0 2px 0 #b51727; }
.country-name { display: grid; grid-template-columns: 32px 1fr; align-items: center; column-gap: 7px; min-width: 0; }.country-name span { grid-row: span 2; font-size: 25px; }.country-name strong { overflow: hidden; color: #162b2d; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }.country-name small { color: #58706c; font-size: 11px; }
.metric { min-width: 0; padding: 4px 7px; border: 1px solid #adb9b3; border-radius: 4px; background: #f8fbf7; text-align: center; }.metric b { display: block; color: #445a57; font-size: 10px; text-transform: uppercase; }.metric strong { display: block; color: #bf1d2d; font-size: 18px; line-height: 1.15; white-space: nowrap; }.metric.gdp strong { color: #09714f; }.detail-link { justify-self: end; color: #a61324; font-size: 11px; font-weight: 800; }
.global-debt-footer { margin: 14px 0 4px; padding: 12px; border: 1px solid #607875; border-radius: 6px; background: rgba(242, 245, 239, 0.78); color: #334c49; font-size: 12px; text-align: center; }.global-debt-footer p { margin: 0; }
@media (max-width: 760px) { .global-debt-app { padding: 8px; }.global-debt-topbar { grid-template-columns: 1fr auto; padding: 10px; }.global-debt-title { grid-column: 1 / -1; grid-row: 2; text-align: left; }.global-debt-title h1 { font-size: 22px; }.global-debt-hero { align-items: start; flex-direction: column; padding: 14px; }.global-debt-hero h2 { font-size: 23px; }.global-debt-hero > p { text-align: left; }.region-heading { align-items: center; flex-direction: column; text-align: center; }.country-row { grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; }.country-name { grid-column: 1 / -1; }.metric { min-height: 43px; }.metric:last-of-type { grid-column: span 2; }.detail-link { display: none; } }
@media (max-width: 390px) { .country-row { grid-template-columns: 1fr; }.metric:last-of-type { grid-column: auto; }.country-name { grid-column: auto; }.metric strong { font-size: 17px; } }