:root {
    --dn-bg: #020617;
    --dn-panel: #0f172a;
    --dn-card: #111827;
    --dn-border: #334155;
    --dn-text: #f8fafc;
    --dn-muted: #94a3b8;
    --dn-accent: #22d3ee;
    --dn-accent-dim: rgba(34, 211, 238, .12);
    --dn-radius: 1rem;
    --dn-font: 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body.dn-body {
    margin: 0;
    font-family: var(--dn-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--dn-text);
    background: var(--dn-bg);
    background-image:
        radial-gradient(ellipse 70% 45% at 50% -5%, rgba(34, 211, 238, .1), transparent),
        radial-gradient(ellipse 50% 35% at 100% 80%, rgba(99, 102, 241, .08), transparent);
    min-height: 100vh;
}
a { color: var(--dn-accent); text-decoration: none; }
a:hover { color: #67e8f9; }

.dn-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem 3rem; }

.dn-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 0 1.5rem;
    border-bottom: 1px solid var(--dn-border);
    margin-bottom: 2rem;
}
.dn-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--dn-text);
    font-weight: 700;
    font-size: 1.05rem;
}
.dn-brand-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .65rem;
    background: linear-gradient(135deg, var(--dn-accent), #14b8a6);
    color: #020617;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .62rem;
    letter-spacing: -0.04em;
}
.dn-header-tools { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.dn-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .9rem;
    border-radius: .75rem;
    border: 1px solid var(--dn-border);
    color: var(--dn-muted);
    font-size: .875rem;
    font-weight: 500;
}
.dn-back:hover { border-color: #64748b; color: var(--dn-text); background: var(--dn-panel); }

.dn-hero {
    margin-bottom: 2rem;
}
.dn-kicker {
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .72rem;
    font-weight: 600;
    color: var(--dn-accent);
    margin: 0 0 .75rem;
}
.dn-hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.85rem, 4.5vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.12;
}
.dn-lead {
    margin: 0;
    max-width: 42rem;
    font-size: 1.1rem;
    color: var(--dn-muted);
}
.dn-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}
.dn-tag {
    padding: .35rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--dn-border);
    font-size: .78rem;
    color: var(--dn-muted);
    background: var(--dn-panel);
}

.dn-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.dn-card {
    background: var(--dn-card);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    transition: border-color .15s ease, transform .15s ease;
}
.dn-card:hover {
    border-color: #475569;
    transform: translateY(-2px);
}
.dn-card-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .25rem;
}
.dn-card-head i { font-size: 1.25rem; color: var(--dn-accent); }
.dn-card h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}
.dn-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--dn-muted);
}
.dn-value {
    background: var(--dn-bg);
    border: 1px solid var(--dn-border);
    border-radius: .65rem;
    padding: .7rem .85rem;
    font-size: .875rem;
    word-break: break-all;
    color: #e2e8f0;
    font-family: ui-monospace, 'Cascadia Code', monospace;
}
.dn-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: auto; padding-top: .35rem; }
.dn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .7rem 1rem;
    border: none;
    border-radius: .65rem;
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s ease, background .15s ease;
}
.dn-btn:hover { opacity: .92; }
.dn-btn--primary { background: var(--dn-accent); color: #020617; }
.dn-btn--paypal { background: #0070ba; color: #fff; }
.dn-btn--revolut { background: #191c1f; color: #fff; border: 1px solid #3a3f45; }
.dn-btn--bank { background: #16a34a; color: #fff; }
.dn-btn--wise { background: #3858e9; color: #fff; }
.dn-btn--ghost {
    background: transparent;
    color: var(--dn-muted);
    border: 1px solid var(--dn-border);
}
.dn-btn--ghost:hover { color: var(--dn-text); border-color: #64748b; }

.dn-footer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--dn-border);
    text-align: center;
    font-size: .8rem;
    color: var(--dn-muted);
}
.dn-footer a { color: var(--dn-muted); }
.dn-footer a:hover { color: var(--dn-accent); }

.dn-toast {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: var(--dn-panel);
    border: 1px solid var(--dn-accent);
    color: var(--dn-text);
    padding: .75rem 1.1rem;
    border-radius: .75rem;
    font-size: .875rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
    z-index: 200;
    transition: transform .25s ease;
    pointer-events: none;
}
.dn-toast.show { transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) {
    .dn-header { flex-direction: column; align-items: flex-start; }
    .dn-header-tools { width: 100%; justify-content: space-between; }
}