:root {
    --dt-bg:     #0d1117;
    --dt-card:   #161b22;
    --dt-border: #30363d;
    --dt-green:  #3ddc64;
    --dt-yellow: #f0a030;
    --dt-text:   #e6edf3;
    --dt-muted:  #8b949e;
    --dt-radius: 12px;
}

.dt-wrap { font-family: 'Courier New', monospace; color: var(--dt-text); max-width: 960px; margin: 0 auto; }
.dt-title { font-size: clamp(1.1rem,3vw,1.5rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dt-yellow); margin: 0 0 4px; }
.dt-subtitle { font-size: .8rem; color: var(--dt-muted); margin: 0 0 16px; }

/* Usage bar */
.dt-usage-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; background: var(--dt-card); border: 1px solid var(--dt-border); border-radius: var(--dt-radius); padding: 16px; margin-bottom: 12px; }
.dt-usage-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dt-usage-val { font-size: 1rem; font-weight: 700; }
.dt-usage-lbl { font-size: .7rem; color: var(--dt-muted); text-align: center; }
.dt-green .dt-usage-val, .dt-green { color: var(--dt-green); }
.dt-muted .dt-usage-val { color: var(--dt-muted); }

/* Disclaimer */
.dt-disclaimer { font-size: .78rem; color: var(--dt-muted); background: var(--dt-card); border: 1px solid var(--dt-border); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; line-height: 1.5; }

/* Results grid */
.dt-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 14px; }

/* Card */
.dt-card { background: var(--dt-card); border: 1px solid var(--dt-border); border-radius: var(--dt-radius); padding: 18px; position: relative; }
.dt-card--best { border-color: var(--dt-green); box-shadow: 0 0 12px rgba(61,220,100,.15); }
.dt-badge { position: absolute; top: -10px; right: 14px; background: var(--dt-green); color: #000; font-size: .7rem; font-weight: 700; padding: 2px 10px; border-radius: 20px; }
.dt-card-name { font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; padding-top: 4px; }
.dt-card-total { font-size: 1.8rem; font-weight: 800; color: var(--dt-yellow); line-height: 1; margin-bottom: 2px; }
.dt-card-total-lbl { font-size: .7rem; font-weight: 400; color: var(--dt-muted); margin-left: 4px; }
.dt-card-diff { font-size: .78rem; color: #e05c5c; margin-bottom: 10px; }

/* Breakdown */
.dt-breakdown { border-top: 1px solid var(--dt-border); padding-top: 10px; margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.dt-row { display: flex; justify-content: space-between; font-size: .78rem; color: var(--dt-muted); }
.dt-row--range { font-size: .72rem; color: #555; }
.dt-row--sep { border-top: 1px solid var(--dt-border); padding-top: 5px; margin-top: 2px; }

.dt-login-msg, .dt-error { background: var(--dt-card); border: 1px solid var(--dt-border); border-radius: var(--dt-radius); padding: 20px; color: var(--dt-muted); text-align: center; }

@media (max-width: 500px) { .dt-usage-bar { grid-template-columns: repeat(2,1fr); } }