.dokkan-plt-shell,
.dokkan-plt-number {
    --dokkan-plt-bg: #ffffff;
    --dokkan-plt-fg: #17212b;
    --dokkan-plt-muted: #465566;
    --dokkan-plt-border: #8995a3;
    --dokkan-plt-link: #174ea6;
    direction: rtl;
    text-align: start;
    box-sizing: border-box;
    color: var(--dokkan-plt-fg);
    background: var(--dokkan-plt-bg);
    font: inherit;
}

[data-theme="dark"] .dokkan-plt-shell,
[data-theme="dark"] .dokkan-plt-number {
    --dokkan-plt-bg: #18212b;
    --dokkan-plt-fg: #f3f5f7;
    --dokkan-plt-muted: #c4ced8;
    --dokkan-plt-border: #8795a5;
    --dokkan-plt-link: #a9ccff;
}

.dokkan-plt-shell {
    border-block-end: 1px solid var(--dokkan-plt-border);
    padding: 0.75rem 1rem;
    max-inline-size: 100%;
}

.dokkan-plt-shell-heading,
.dokkan-plt-shell nav,
.dokkan-plt-number-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    min-inline-size: 0;
}

.dokkan-plt-shell-heading {
    justify-content: space-between;
}

.dokkan-plt-shell nav {
    margin-block-start: 0.5rem;
}

.dokkan-plt-shell a {
    color: var(--dokkan-plt-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    padding-block: 0.5rem;
    overflow-wrap: anywhere;
}

.dokkan-plt-shell a:focus-visible {
    outline: 2px solid var(--dokkan-plt-link);
    outline-offset: 3px;
}

.dokkan-plt-number {
    padding: 0.75rem;
    border: 1px solid var(--dokkan-plt-border);
    border-radius: 0.375rem;
    max-inline-size: 100%;
}

.dokkan-plt-number bdi {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    min-inline-size: 0;
}

.dokkan-plt-number p {
    margin: 0.5rem 0 0;
    color: var(--dokkan-plt-muted);
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .dokkan-plt-shell {
        padding-inline: 0.75rem;
    }

    .dokkan-plt-shell nav a {
        min-block-size: 44px;
        display: inline-flex;
        align-items: center;
    }
}