/* ═══════════════════════════════════════════════
   Qubic Doge Mining Stats — Dashboard
   System fonts only. Colors via inline styles.
   ═══════════════════════════════════════════════ */

:root {
    --qds-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --qds-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    --qds-bg:         #0f1117;
    --qds-surface:    #181b24;
    --qds-surface-alt:#1f2330;
    --qds-border:     #2a2e3a;
    --qds-accent:     #e8a317;
    --qds-accent-dim: rgba(232,163,23,.15);
    --qds-accent-glow:rgba(232,163,23,.25);
    --qds-green:      #22c55e;
    --qds-green-dim:  rgba(34,197,94,.12);
    --qds-red:        #ef4444;
    --qds-red-dim:    rgba(239,68,68,.12);
    --qds-amber:      #f59e0b;
    --qds-blue-dim:   rgba(59,130,246,.12);
    --qds-purple-dim: rgba(168,85,247,.12);
    --qds-radius:     10px;
    --qds-radius-lg:  14px;
    --qds-transition: .25s cubic-bezier(.4,0,.2,1);
}

/* ── Root ── */
#qds-root.qds {
    font-family: var(--qds-font) !important;
    color: #e4e6ed;
    background: var(--qds-bg);
    border-radius: var(--qds-radius-lg);
    max-width: 960px;
    margin: 2rem auto;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--qds-border), 0 24px 48px rgba(0,0,0,.45);
}

/* ── Blocksy / theme nuclear reset — scoped to #qds-root ── */
#qds-root h1, #qds-root h2, #qds-root h3, #qds-root h4,
#qds-root p, #qds-root span, #qds-root div, #qds-root footer,
#qds-root section, #qds-root header, #qds-root code,
#qds-root label, #qds-root strong {
    font-family: inherit !important;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    line-height: inherit;
    text-transform: inherit;
    box-shadow: none;
}
#qds-root a { color: var(--qds-accent); text-decoration: none; }

/* ── Header ── */
#qds-root .qds-header {
    position: relative; padding: 2.5rem 2rem 2rem; text-align: center;
    background: radial-gradient(ellipse 70% 50% at 50% 0%,var(--qds-accent-dim) 0%,transparent 100%),var(--qds-surface);
    border-bottom: 1px solid var(--qds-border);
}
#qds-root .qds-header__badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--qds-font-mono) !important; font-size: .7rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    background: var(--qds-green-dim); border: 1px solid rgba(34,197,94,.25);
    padding: 3px 10px; border-radius: 100px; margin-bottom: .75rem;
}
#qds-root .qds-header__badge::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--qds-green); animation: qds-pulse 1.8s ease-in-out infinite;
}
@keyframes qds-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
#qds-root .qds-header__title {
    font-size: clamp(1.6rem,4vw,2.25rem) !important; font-weight: 800 !important;
    letter-spacing: -.02em; margin: 0 0 .25rem !important; line-height: 1.2 !important;
}
#qds-root .qds-header__sub { font-size: .9rem !important; margin: 0 !important; }

/* ── Ribbon ── */
#qds-root .qds-ribbon {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: .5rem 1.25rem; padding: .75rem 1.5rem;
    background: var(--qds-surface-alt); border-bottom: 1px solid var(--qds-border);
}
#qds-root .qds-ribbon__item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#qds-root .qds-ribbon__label { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
#qds-root .qds-ribbon__value { font-size: .82rem; font-weight: 600; min-width: 60px; text-align: center; }
#qds-root .qds-ribbon__sep { width: 1px; height: 28px; background: var(--qds-border); }

/* ── Sections ── */
#qds-root .qds-section { padding: 1.5rem 1.5rem 0; }
#qds-root .qds-section__title {
    display: flex; align-items: center; gap: .5rem;
    font-size: 1rem !important; font-weight: 700 !important; text-transform: uppercase;
    letter-spacing: .06em; margin: 0 0 1rem !important;
}
#qds-root .qds-section__icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Chart ── */
#qds-root .qds-chart-wrap {
    background: var(--qds-surface); border: 1px solid var(--qds-border);
    border-radius: var(--qds-radius); padding: .75rem; height: 260px; position: relative;
}

/* ── Grid ── */
#qds-root .qds-grid { display: grid; gap: .75rem; }
#qds-root .qds-grid--2 { grid-template-columns: repeat(2,1fr); }
#qds-root .qds-grid--3 { grid-template-columns: repeat(3,1fr); }
#qds-root .qds-grid--4 { grid-template-columns: repeat(2,1fr); }
@media (min-width: 640px) { #qds-root .qds-grid--4 { grid-template-columns: repeat(4,1fr); } }

/* ── Cards ── */
#qds-root .qds-card {
    background: var(--qds-surface) !important; border: 1px solid var(--qds-border);
    border-radius: var(--qds-radius); padding: 1rem 1.1rem;
    display: flex; flex-direction: column; gap: .3rem;
    transition: border-color var(--qds-transition), box-shadow var(--qds-transition);
}
#qds-root .qds-card:hover { border-color: var(--qds-accent); box-shadow: 0 0 0 1px var(--qds-accent-glow); }
#qds-root .qds-card__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
#qds-root .qds-card__value { font-size: 1.15rem; font-weight: 600; line-height: 1.3; min-height: 1.6em; }
#qds-root .qds-card__change { font-size: .75rem; font-weight: 600; }
#qds-root .qds-card__change.is-up   { color: var(--qds-green) !important; }
#qds-root .qds-card__change.is-down { color: #ef4444 !important; }
#qds-root .qds-card__meta { font-size: .72rem; }

/* Card variants — backgrounds only, colors via inline */
#qds-root .qds-card--hero { background: radial-gradient(ellipse 60% 100% at 10% 100%,var(--qds-accent-dim) 0%,transparent 70%),var(--qds-surface) !important; }
#qds-root .qds-card--hero .qds-card__value { font-size: clamp(1.25rem,3vw,1.75rem); }
#qds-root .qds-card--ath { background: radial-gradient(ellipse 60% 100% at 50% 100%,var(--qds-purple-dim) 0%,transparent 70%),var(--qds-surface) !important; border-left: 3px solid #a855f7; }
#qds-root .qds-card--ath .qds-card__value { font-size: clamp(1.1rem,2.5vw,1.4rem); }
#qds-root .qds-card--hero-alt { background: radial-gradient(ellipse 60% 100% at 90% 100%,var(--qds-blue-dim) 0%,transparent 70%),var(--qds-surface) !important; }
#qds-root .qds-card--hero-alt .qds-card__value { font-size: clamp(1.1rem,2.5vw,1.4rem); }
#qds-root .qds-card--success { border-left: 3px solid var(--qds-green); }
#qds-root .qds-card--danger  { border-left: 3px solid #ef4444; }
#qds-root .qds-card--warn    { border-left: 3px solid var(--qds-amber); }

/* ── Hashrate share ── */
#qds-root .qds-share-block { margin: .75rem 0; }
#qds-root .qds-share-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
#qds-root .qds-share-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
#qds-root .qds-share-pct { font-size: 1rem; font-weight: 600; }

/* ── Bars ── */
#qds-root .qds-bar { flex: 1; height: 8px; background: var(--qds-surface-alt); border-radius: 100px; overflow: hidden; }
#qds-root .qds-bar__fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg,var(--qds-green),var(--qds-accent)); transition: width .6s ease; }
#qds-root .qds-bar-wrap { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; padding-bottom: 1.5rem; }
#qds-root .qds-bar__label { font-size: .8rem; font-weight: 600; min-width: 52px; text-align: right; }

/* ── Skeleton ── */
#qds-root .qds-skeleton { position: relative; overflow: hidden; color: transparent !important; border-radius: 4px; background: var(--qds-surface-alt); }
#qds-root .qds-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 50%,transparent 100%); animation: qds-shimmer 1.6s ease infinite; }
@keyframes qds-shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
#qds-root.qds-loaded .qds-skeleton { background: none !important; color: inherit !important; }
#qds-root.qds-loaded .qds-skeleton::after { display: none; }

/* ── Error ── */
#qds-root .qds-error { margin: 1.5rem; padding: 1.25rem 1.5rem; background: var(--qds-red-dim); border: 1px solid rgba(239,68,68,.3); border-radius: var(--qds-radius); text-align: center; }
#qds-root .qds-error p { margin: .25rem 0; }

/* ── Footer ── */
#qds-root .qds-footer { text-align: center; font-size: .72rem; padding: 1.25rem; border-top: 1px solid var(--qds-border); }
#qds-root .qds-footer code { font-family: var(--qds-font-mono) !important; background: var(--qds-surface-alt); padding: 1px 5px; border-radius: 4px; font-size: .7rem; }

/* ── Flash ── */
#qds-root .qds-flash { animation: qds-value-flash .5s ease; }
@keyframes qds-value-flash { 0%{color:var(--qds-accent)} 100%{color:inherit} }

/* ── Responsive ── */
@media (max-width: 600px) {
    #qds-root .qds-header { padding: 1.75rem 1.25rem 1.5rem; }
    #qds-root .qds-section { padding: 1rem 1rem 0; }
    #qds-root .qds-grid--2, #qds-root .qds-grid--3 { grid-template-columns: 1fr; }
    #qds-root .qds-ribbon { gap: .4rem .75rem; padding: .6rem 1rem; }
    #qds-root .qds-chart-wrap { height: 200px; }
}