:root {
    --nit-component-accent: rgb(var(--accent-rgb, 119, 168, 255));
    --nit-component-accent-soft: rgba(var(--accent-rgb, 119, 168, 255), .13);
    --nit-component-line: rgba(150, 181, 218, .13);
    --nit-component-panel: rgba(8, 18, 30, .82);
}

.nit-availability {
    position: relative;
    z-index: 4;
    width: min(1540px, calc(100% - clamp(30px, 6vw, 120px)));
    margin: 30px auto 0;
    padding: clamp(20px, 2.4vw, 34px);
    overflow: hidden;
    border: 1px solid var(--nit-component-line);
    border-radius: 28px;
    background:
        radial-gradient(circle at 89% 0%, rgba(var(--accent-rgb, 119, 168, 255), .16), transparent 35%),
        linear-gradient(145deg, rgba(15, 29, 46, .94), rgba(5, 13, 23, .91));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .17);
    color: #eef5ff;
    direction: rtl;
    font-family: var(--nitrugen-font-family, Tahoma, sans-serif);
}

.nit-availability::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, .035) 40%, transparent 62%);
    transform: translateX(75%);
    animation: nitAvailabilitySheen 9s ease-in-out infinite;
}

@keyframes nitAvailabilitySheen {
    0%, 68%, 100% { transform: translateX(75%); opacity: 0; }
    76% { opacity: 1; }
    90% { transform: translateX(-80%); opacity: 0; }
}

.nit-availability__header,
.nit-availability__heading,
.nit-availability__tools,
.nit-version__meta,
.nit-version__actions {
    display: flex;
    align-items: center;
}

.nit-availability__header {
    position: relative;
    z-index: 1;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.nit-availability__heading { gap: 13px; }
.nit-availability__heading > i {
    width: 11px;
    height: 11px;
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    background: var(--nit-component-accent);
    box-shadow: 0 0 0 7px var(--nit-component-accent-soft), 0 0 24px rgba(var(--accent-rgb, 119, 168, 255), .5);
}
.nit-availability__heading small,
.nit-availability__heading strong { display: block; }
.nit-availability__heading small { color: #71839a; font-size: 10px; letter-spacing: .04em; }
.nit-availability__heading strong { margin-top: 3px; font-size: clamp(18px, 1.45vw, 25px); }

.nit-availability__tools { gap: 8px; }
.nit-availability__tools button,
.nit-version__actions button,
.nit-version__actions a {
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 13px;
    background: rgba(255, 255, 255, .045);
    color: #aab8c9;
    font: 800 11px var(--nitrugen-font-family, Tahoma, sans-serif);
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.nit-availability__tools button { padding: 0 14px; }
.nit-availability__tools button:hover,
.nit-availability__tools button.is-active { border-color: rgba(var(--accent-rgb, 119, 168, 255), .35); color: #e9f2ff; background: var(--nit-component-accent-soft); }

.nit-version-tabs {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 18px;
    background: rgba(2, 9, 17, .45);
}
.nit-version-tab {
    position: relative;
    min-height: 58px;
    padding: 8px 15px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #6f8094;
    font-family: inherit;
    text-align: right;
    cursor: pointer;
    transition: .22s ease;
}
.nit-version-tab strong,
.nit-version-tab small { display: block; }
.nit-version-tab strong { color: #aab6c6; font-size: 12px; }
.nit-version-tab small { margin-top: 4px; font-size: 9px; }
.nit-version-tab::before {
    position: absolute;
    top: 50%;
    right: 0;
    width: 3px;
    height: 0;
    border-radius: 5px;
    background: var(--nit-component-accent);
    content: "";
    transform: translateY(-50%);
    box-shadow: 0 0 18px var(--nit-component-accent);
    transition: height .22s ease;
}
.nit-version-tab.is-active { background: rgba(var(--accent-rgb, 119, 168, 255), .105); color: #a9c8f3; }
.nit-version-tab.is-active::before { height: 27px; }
.nit-version-tab.is-active strong { color: #f3f7fd; }
.nit-version-tab[aria-disabled="true"] { cursor: default; }

.nit-version-panels { position: relative; z-index: 1; margin-top: 13px; }
.nit-version {
    display: none;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
    min-height: 104px;
    padding: 19px 21px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 19px;
    background: rgba(1, 8, 15, .41);
}
.nit-version.is-active { display: grid; animation: nitVersionIn .28s cubic-bezier(.2, .75, .2, 1); }
@keyframes nitVersionIn { from { opacity: 0; transform: translateY(7px); } }
.nit-version__copy h3 { margin: 0 0 6px; color: #edf3fb; font-size: 15px; }
.nit-version__copy p { max-width: 760px; margin: 0; color: #76879b; font-size: 10px; line-height: 1.9; }
.nit-version__meta { gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.nit-version__meta span {
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 7px;
    color: #8e9caf;
    font: 800 8px Arial, sans-serif;
}
.nit-version__meta .is-ready { color: #57dab3; border-color: rgba(87, 218, 179, .18); background: rgba(87, 218, 179, .07); }
.nit-version__meta .is-waiting { color: #d2a96f; border-color: rgba(210, 169, 111, .18); background: rgba(210, 169, 111, .07); }
.nit-version__actions { gap: 8px; direction: rtl; }
.nit-version__actions button,
.nit-version__actions a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 118px; padding: 0 15px; }
.nit-version__actions .is-primary {
    border-color: rgba(var(--accent-rgb, 119, 168, 255), .62);
    background: linear-gradient(135deg, rgba(var(--accent-rgb, 119, 168, 255), .95), rgba(var(--accent-rgb, 119, 168, 255), .68));
    color: #06111f;
    box-shadow: 0 12px 28px rgba(var(--accent-rgb, 119, 168, 255), .17);
}
.nit-version__actions .is-primary:hover { transform: translateY(-2px); box-shadow: 0 17px 36px rgba(var(--accent-rgb, 119, 168, 255), .23); }
.nit-version__actions [aria-disabled="true"] { opacity: .42; cursor: not-allowed; }

.nit-api-toast {
    position: fixed;
    z-index: 99999;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(390px, calc(100vw - 36px));
    padding: 13px 15px;
    border: 1px solid rgba(var(--accent-rgb, 119, 168, 255), .28);
    border-radius: 15px;
    background: rgba(6, 16, 27, .93);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    color: #dfe9f6;
    font: 800 11px var(--nitrugen-font-family, Tahoma, sans-serif);
    backdrop-filter: blur(18px) saturate(145%);
    animation: nitToastIn .25s ease;
}
.nit-api-toast::before { width: 8px; height: 8px; border-radius: 50%; background: var(--nit-component-accent); content: ""; box-shadow: 0 0 15px var(--nit-component-accent); }
.nit-api-toast.is-error { border-color: rgba(245, 99, 112, .32); }
.nit-api-toast.is-error::before { background: #f56370; box-shadow: 0 0 15px #f56370; }
@keyframes nitToastIn { from { opacity: 0; transform: translateY(8px); } }

.nit-report-dialog {
    width: min(520px, calc(100vw - 30px));
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(var(--accent-rgb, 119, 168, 255), .2);
    border-radius: 24px;
    background: #081421;
    color: #edf4fc;
    box-shadow: 0 34px 100px rgba(0, 0, 0, .6);
    font-family: var(--nitrugen-font-family, Tahoma, sans-serif);
    direction: rtl;
}
.nit-report-dialog::backdrop { background: rgba(1, 6, 12, .76); backdrop-filter: blur(9px); }
.nit-report-dialog form { display: grid; gap: 15px; padding: 25px; }
.nit-report-dialog h2 { margin: 0; font-size: 19px; }
.nit-report-dialog p { margin: -8px 0 0; color: #71839a; font-size: 10px; line-height: 1.8; }
.nit-report-dialog select,
.nit-report-dialog textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 13px;
    background: rgba(255, 255, 255, .045);
    color: #dce7f5;
    font: 700 11px inherit;
    outline: 0;
}
.nit-report-dialog select { height: 46px; padding: 0 12px; }
.nit-report-dialog textarea { min-height: 95px; padding: 12px; resize: vertical; }
.nit-report-dialog menu { display: flex; justify-content: flex-end; gap: 8px; margin: 0; padding: 0; }
.nit-report-dialog menu button { min-height: 42px; padding: 0 17px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.05); color: #aab8c8; font: 800 11px inherit; cursor: pointer; }
.nit-report-dialog menu button[type="submit"] { border-color: rgba(var(--accent-rgb,119,168,255),.35); background: var(--nit-component-accent-soft); color: #dceaff; }

@media (hover: hover) and (pointer: fine) {
    .nit-version-tab:hover { color: #c0cddd; background: rgba(255, 255, 255, .035); transform: translateY(-1px); }
}

@media (max-width: 720px) {
    .nit-availability { width: calc(100% - 28px); margin-top: 18px; padding: 17px; border-radius: 22px; }
    .nit-availability__header { align-items: flex-start; flex-direction: column; gap: 14px; }
    .nit-availability__tools { width: 100%; }
    .nit-availability__tools button { flex: 1; padding: 0 8px; }
    .nit-version-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .nit-version-tabs::-webkit-scrollbar { display: none; }
    .nit-version-tab { flex: 0 0 72%; scroll-snap-align: start; }
    .nit-version { grid-template-columns: 1fr; }
    .nit-version__actions { display: grid; grid-template-columns: 1fr 1fr; }
    .nit-version__actions button,
    .nit-version__actions a { min-width: 0; }
}

@media (min-width: 1900px) {
    .nit-availability__heading small,
    .nit-version__copy p { font-size: 13px; }
    .nit-version-tab strong,
    .nit-version__actions button,
    .nit-version__actions a { font-size: 14px; }
    .nit-version-tab small { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .nit-availability::after { animation: none; }
    .nit-version.is-active,
    .nit-api-toast { animation: none; }
}