.project-hero--event {
    background: radial-gradient(circle at 16% 18%, rgba(255, 190, 92, 0.24), transparent 28%), radial-gradient(circle at 84% 72%, rgba(141, 229, 214, 0.2), transparent 26%), linear-gradient(135deg, #10131c, #253028 55%, #111722);
}

.project-hero--datapack {
    background: radial-gradient(circle at 18% 20%, rgba(127, 190, 91, 0.24), transparent 28%), radial-gradient(circle at 82% 72%, rgba(166, 121, 71, 0.2), transparent 25%), linear-gradient(135deg, #101a13, #23351e 55%, #17130f);
}

.project-hero--roblox-ui {
    background: radial-gradient(circle at 14% 18%, rgba(91, 160, 255, 0.24), transparent 26%), radial-gradient(circle at 84% 74%, rgba(226, 82, 116, 0.2), transparent 26%), linear-gradient(135deg, #091426, #172d4d 55%, #1b101d);
}

.project-hero--social {
    background: radial-gradient(circle at 16% 20%, rgba(90, 173, 255, 0.24), transparent 28%), radial-gradient(circle at 84% 70%, rgba(196, 132, 255, 0.2), transparent 25%), linear-gradient(135deg, #0b1424, #1d2845 54%, #171226);
}

.project-hero--discord {
    background: radial-gradient(circle at 14% 18%, rgba(88, 101, 242, 0.34), transparent 29%), radial-gradient(circle at 86% 72%, rgba(141, 229, 214, 0.16), transparent 24%), linear-gradient(135deg, #111426, #22264b 56%, #10131d);
}

.studio-tool {
    --tool-accent: #8de5d6;
    --tool-accent-rgb: 141, 229, 214;
}

.studio-tool[data-tool="event"] {
    --tool-accent: #ffc36b;
    --tool-accent-rgb: 255, 195, 107;
}

.studio-tool[data-tool="datapack"] {
    --tool-accent: #9ed477;
    --tool-accent-rgb: 158, 212, 119;
}

.studio-tool[data-tool="roblox"] {
    --tool-accent: #6fb0ff;
    --tool-accent-rgb: 111, 176, 255;
}

.studio-tool[data-tool="social"] {
    --tool-accent: #a98cff;
    --tool-accent-rgb: 169, 140, 255;
}

.studio-tool[data-tool="discord"] {
    --tool-accent: #8991ff;
    --tool-accent-rgb: 137, 145, 255;
}

.studio-modules {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .7rem;
    margin: 1.4rem 0 1.2rem;
    padding: .65rem;
    border: 1px solid rgba(18, 32, 27, .1);
    border-radius: 24px;
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 18px 44px rgba(17, 25, 21, .07);
}

.studio-modules a {
    min-width: 0;
    padding: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "number icon"
        "title title"
        "detail detail";
    gap: .35rem .55rem;
    color: #15251e;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 17px;
    background: rgba(var(--tool-accent-rgb), .065);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.studio-modules a:hover,
.studio-modules a:focus-visible {
    color: #0b1812;
    transform: translateY(-3px);
    border-color: rgba(var(--tool-accent-rgb), .65);
    background: rgba(var(--tool-accent-rgb), .15);
}

.studio-modules a:focus-visible {
    outline: 3px solid rgba(var(--tool-accent-rgb), .42);
    outline-offset: 2px;
}

.studio-modules a > span {
    grid-area: number;
    color: rgba(20, 35, 28, .45);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.studio-modules a > i {
    grid-area: icon;
    justify-self: end;
    color: rgb(var(--tool-accent-rgb));
    font-size: .9rem;
}

.studio-modules a > strong {
    grid-area: title;
    overflow: hidden;
    font-size: .83rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-modules a > small {
    grid-area: detail;
    color: rgba(20, 35, 28, .6);
    font-size: .68rem;
    line-height: 1.4;
}

.studio-tool [id] {
    scroll-margin-top: 110px;
}

.studio-tool__grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: start;
}

.studio-tool__panel {
    min-width: 0;
    padding: clamp(1.1rem, 2vw, 1.6rem);
    border: 1px solid rgba(19, 30, 25, 0.1);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 24px 54px rgba(17, 22, 18, 0.1);
}

.studio-tool__panel--dark {
    color: #f8f4ed;
    border-color: rgba(var(--tool-accent-rgb), 0.2);
    background: linear-gradient(155deg, rgba(10, 18, 29, 0.98), rgba(18, 28, 39, 0.95));
}

.studio-tool__header,
.studio-tool__toolbar,
.studio-tool__row,
.studio-tool__actions,
.studio-tool__split {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.studio-tool__header,
.studio-tool__toolbar {
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.studio-tool__header h2,
.studio-tool__header h3,
.studio-tool__panel h3,
.studio-tool__panel p {
    margin: 0;
}

.studio-tool__form {
    display: grid;
    gap: 0.9rem;
}

.studio-tool__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.studio-tool__field {
    display: grid;
    gap: 0.42rem;
}

.studio-tool__field--wide {
    grid-column: 1 / -1;
}

.studio-tool__field label {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ink);
}

.studio-tool__panel--dark .studio-tool__field label {
    color: #f8f4ed;
}

.studio-tool__field input,
.studio-tool__field select,
.studio-tool__field textarea,
.studio-tool__code {
    width: 100%;
    min-height: 48px;
    padding: 0.78rem 0.9rem;
    border: 1px solid rgba(21, 32, 27, 0.14);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    font: inherit;
}

.studio-tool__field textarea {
    min-height: 110px;
    resize: vertical;
}

.studio-tool__field input[type="color"] {
    padding: 0.3rem;
    cursor: pointer;
}

.studio-tool__field input[type="range"] {
    min-height: auto;
    padding: 0;
}

.studio-tool__code {
    min-height: 330px;
    resize: vertical;
    border-color: rgba(255, 255, 255, 0.1);
    background: #09111c;
    color: #d9fff7;
    font: 0.84rem/1.55 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    tab-size: 4;
}

.studio-tool__tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.studio-tool__tabs button,
.studio-tool__mini-button {
    min-height: 40px;
    padding: 0.62rem 0.84rem;
    border: 1px solid rgba(20, 31, 26, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.studio-tool__tabs button[aria-selected="true"],
.studio-tool__mini-button:hover,
.studio-tool__mini-button:focus-visible {
    border-color: rgba(var(--tool-accent-rgb), 0.75);
    background: rgba(var(--tool-accent-rgb), 0.22);
}

.studio-tool__actions {
    flex-wrap: wrap;
    margin-top: 0.2rem;
}

.studio-tool__actions--spaced { margin-top: 1rem; }
.ui-preview--relative { position: relative; }

.studio-tool__actions .btn {
    flex: 1 1 150px;
}

.studio-tool__status {
    min-height: 1.5em;
    margin-top: 0.75rem !important;
    color: rgba(27, 39, 33, 0.7);
}

.studio-tool__panel--dark .studio-tool__status {
    color: rgba(248, 244, 237, 0.72);
}

.studio-tool__status[data-tone="error"] {
    color: #ff9e98;
}

.studio-tool__status[data-tone="success"] {
    color: var(--tool-accent);
}

.event-stage {
    position: relative;
    display: grid;
    min-height: 560px;
    align-content: space-between;
    gap: 1.2rem;
    padding: clamp(1.2rem, 3vw, 2.2rem);
    overflow: hidden;
    border-radius: 24px;
    background: radial-gradient(circle at top right, rgba(var(--tool-accent-rgb), 0.2), transparent 32%), #070d15;
}

.event-stage:fullscreen {
    min-height: 100vh;
    border-radius: 0;
    padding: clamp(1.5rem, 5vw, 5rem);
}

.event-stage__top,
.event-stage__timer,
.event-stage__round {
    position: relative;
    z-index: 1;
}

.event-stage__top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.event-stage__eyebrow,
.event-stage__round span {
    color: var(--tool-accent);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.event-stage__title {
    margin: 0.25rem 0 0;
    color: #fff;
    font-size: clamp(1.3rem, 3vw, 2.4rem);
}

.event-stage__timer {
    text-align: center;
    color: #fff;
    font: 900 clamp(4rem, 12vw, 9rem)/0.9 "Arial Black", system-ui, sans-serif;
    letter-spacing: -0.07em;
    text-shadow: 0 0 42px rgba(var(--tool-accent-rgb), 0.25);
}

.event-stage__timer.is-warning {
    color: #ffbc66;
}

.event-stage__timer.is-finished {
    color: #ff7770;
    animation: eventPulse 0.8s ease-in-out infinite alternate;
}

@keyframes eventPulse {
    to { transform: scale(1.025); opacity: 0.78; }
}

.event-stage__round {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
}

.event-stage__round strong {
    display: block;
    margin-top: 0.25rem;
    color: #fff;
    font-size: clamp(1.4rem, 4vw, 2.8rem);
}

.team-list,
.ranking-list,
.file-tree,
.field-builder {
    display: grid;
    gap: 0.65rem;
}

.team-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto auto auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.65rem;
    border-radius: 16px;
    background: rgba(18, 28, 39, 0.045);
}

.team-row__color {
    width: 14px;
    height: 36px;
    border-radius: 8px;
    background: var(--team-color);
}

.team-row input {
    min-width: 0;
    width: 100%;
    padding: 0.65rem 0.7rem;
    border: 1px solid rgba(20, 31, 26, 0.12);
    border-radius: 12px;
    font: inherit;
    font-weight: 800;
}

.team-row__score {
    min-width: 44px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 900;
}

.team-row button {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: rgba(19, 30, 25, 0.08);
    font-weight: 900;
    cursor: pointer;
}

.ranking-list {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.ranking-card {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 4px solid var(--team-color);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
}

.ranking-card span,
.ranking-card strong {
    display: block;
}

.ranking-card span {
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.ranking-card strong {
    margin: 0.25rem 0;
    font-size: 1.2rem;
}

.ranking-card b {
    color: var(--tool-accent);
    font-size: 1.55rem;
}

.draw-result {
    display: grid;
    min-height: 94px;
    place-items: center;
    margin-top: 0.8rem;
    padding: 1rem;
    border: 1px dashed rgba(var(--tool-accent-rgb), 0.4);
    border-radius: 18px;
    background: rgba(var(--tool-accent-rgb), 0.08);
    text-align: center;
}

.draw-result strong {
    color: var(--tool-accent);
    font-size: 1.35rem;
}

.file-tree {
    max-height: 260px;
    overflow: auto;
    padding: 1rem;
    border-radius: 18px;
    background: #09111c;
    color: #cceade;
    font: 0.82rem/1.5 Consolas, monospace;
}

.file-tree button {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.file-tree button:hover,
.file-tree button.is-active {
    background: rgba(var(--tool-accent-rgb), 0.15);
    color: #fff;
}

.ui-preview {
    display: grid;
    min-height: 520px;
    place-items: center;
    padding: 1.2rem;
    overflow: hidden;
    border-radius: 22px;
    background: radial-gradient(circle at 25% 10%, #284b69, transparent 34%), linear-gradient(160deg, #111d2c, #20374c 52%, #112238);
}

.ui-preview__window {
    width: min(100%, 520px);
    padding: 1.1rem;
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ui-radius, 18px);
    background: var(--ui-bg, #172235);
    color: var(--ui-text, #ffffff);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.38);
    opacity: var(--ui-opacity, 0.96);
}

.ui-preview__window h3 {
    margin-bottom: 0.4rem;
    color: inherit;
    font-size: 1.45rem;
}

.ui-preview__window p {
    color: inherit;
    opacity: 0.75;
}

.ui-preview__button {
    width: 100%;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 0;
    border-radius: calc(var(--ui-radius, 18px) * 0.65);
    background: var(--ui-accent, #2f80ed);
    color: #fff;
    font: inherit;
    font-weight: 900;
}

.ui-preview__notification {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    max-width: 280px;
    padding: 0.85rem 1rem;
    border-left: 4px solid var(--ui-accent, #2f80ed);
    border-radius: 13px;
    background: rgba(8, 14, 24, 0.92);
    color: #fff;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
}

.social-preview-stack {
    display: grid;
    gap: 1rem;
}

.social-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 18px;
    background: #202225;
    color: #f4f4f5;
}

.social-card__image {
    display: grid;
    width: 100%;
    aspect-ratio: 1.91 / 1;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #1f3548, #342a4f);
    color: rgba(255, 255, 255, 0.55);
    font-weight: 800;
}

.social-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.social-card__body {
    padding: 0.9rem 1rem;
}

.social-card__domain,
.social-card__platform {
    color: #a8aaad;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.social-card__favicon {
    width: 18px;
    height: 18px;
    margin-right: 0.38rem;
    border-radius: 4px;
    object-fit: contain;
    vertical-align: middle;
}

.social-card__body strong {
    display: block;
    margin: 0.3rem 0;
    font-size: 1.05rem;
}

.social-card__body p {
    color: #c8c9cb;
    font-size: 0.9rem;
}

.social-card--linkedin {
    background: #fff;
    color: #16191c;
}

.social-card--linkedin .social-card__body p,
.social-card--linkedin .social-card__domain {
    color: #5f656b;
}

.social-card--mobile {
    max-width: 360px;
    border-radius: 28px;
    background: #f5f5f7;
    color: #151515;
}

.social-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.social-check {
    padding: 0.75rem;
    border-radius: 14px;
    background: rgba(17, 28, 39, 0.05);
}

.social-check[data-state="ok"] {
    background: rgba(53, 145, 101, 0.12);
}

.social-check[data-state="warn"] {
    background: rgba(226, 151, 54, 0.13);
}

.embed-preview {
    max-width: 560px;
    padding: 1rem;
    border-radius: 16px;
    background: #313338;
    color: #dbdee1;
    font-family: Arial, sans-serif;
}

.embed-preview__author {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    margin-bottom: 0.7rem;
}

.embed-preview__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #5865f2;
}

.embed-preview__bot {
    padding: 0.15rem 0.32rem;
    border-radius: 3px;
    background: #5865f2;
    color: #fff;
    font-size: 0.65rem;
}

.embed-preview__card {
    overflow: hidden;
    padding: 0.85rem 1rem;
    border-left: 4px solid var(--embed-color, #5865f2);
    border-radius: 4px;
    background: #2b2d31;
}

.embed-preview__card h3 {
    margin: 0.35rem 0;
    color: #f2f3f5;
    font-size: 1rem;
}

.embed-preview__card p {
    color: #dbdee1;
    white-space: pre-wrap;
}

.embed-preview__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 0.9rem;
}

.embed-preview__field strong,
.embed-preview__field span {
    display: block;
}

.embed-preview__field span {
    margin-top: 0.18rem;
    color: #b5bac1;
    font-size: 0.9rem;
}

.embed-preview__image {
    width: 100%;
    max-height: 280px;
    margin-top: 0.8rem;
    object-fit: cover;
    border-radius: 5px;
}

.embed-preview__buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.7rem;
}

.embed-preview__buttons span {
    padding: 0.55rem 0.85rem;
    border-radius: 4px;
    background: #4e5058;
    color: #fff;
    font-weight: 700;
}

.field-builder__row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.5rem;
}

.field-builder__row input {
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid rgba(20, 31, 26, 0.12);
    border-radius: 12px;
    font: inherit;
}

.field-builder__row button {
    border: 0;
    border-radius: 10px;
    background: rgba(210, 72, 72, 0.12);
    color: #9e2e2e;
    cursor: pointer;
}

.studio-tool__note {
    padding: 0.8rem 0.9rem;
    border-left: 3px solid var(--tool-accent);
    border-radius: 0 12px 12px 0;
    background: rgba(var(--tool-accent-rgb), 0.1);
    font-size: 0.9rem;
}

/* Datapack Studio */
.datapack-capabilities {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.datapack-capabilities article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem;
    align-items: center;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(24, 38, 28, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 16px 34px rgba(17, 26, 18, 0.06);
}

.datapack-capabilities article > span {
    grid-row: 1 / 3;
    color: rgba(36, 70, 39, 0.34);
    font: 900 1.45rem/1 Arial, sans-serif;
}

.datapack-capabilities strong {
    color: var(--ink);
}

.datapack-capabilities p {
    margin: 0;
    color: rgba(23, 33, 29, 0.66);
    font-size: 0.84rem;
}

.datapack-studio {
    display: grid;
    gap: 1.25rem;
}

.datapack-template-bar {
    display: grid;
    grid-template-columns: minmax(170px, 0.8fr) repeat(4, minmax(140px, 1fr));
    gap: 0.7rem;
    align-items: stretch;
    padding: 0.85rem;
    border: 1px solid rgba(24, 38, 28, 0.09);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
}

.datapack-template-bar > div {
    display: grid;
    align-content: center;
    padding: 0.35rem 0.65rem;
}

.datapack-template-bar__label,
.datapack-kicker {
    display: block;
    margin-bottom: 0.25rem;
    color: #4f8653;
    font-size: 0.69rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.datapack-template-bar button {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    min-height: 66px;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(24, 38, 28, 0.09);
    border-radius: 16px;
    background: rgba(248, 250, 245, 0.92);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.datapack-template-bar button:hover,
.datapack-template-bar button:focus-visible,
.datapack-template-bar button.is-active {
    transform: translateY(-2px);
    border-color: rgba(83, 145, 85, 0.45);
    background: rgba(158, 212, 119, 0.16);
}

.datapack-template-bar button i {
    display: grid;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    place-items: center;
    border-radius: 11px;
    background: rgba(101, 157, 84, 0.12);
    color: #477d4b;
}

.datapack-template-bar button span,
.datapack-template-bar button strong,
.datapack-template-bar button small {
    display: block;
}

.datapack-template-bar button small {
    margin-top: 0.1rem;
    color: rgba(23, 33, 29, 0.58);
    font-size: 0.73rem;
}

.datapack-workspace {
    display: grid;
    grid-template-columns: minmax(310px, 0.72fr) minmax(0, 1.6fr);
    gap: 1rem;
    align-items: start;
}

.datapack-settings {
    position: sticky;
    top: 104px;
    max-height: calc(100vh - 126px);
    overflow: auto;
    scrollbar-width: thin;
}

.datapack-settings .studio-tool__field textarea {
    min-height: 92px;
    font-size: 0.9rem;
}

.datapack-module-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.datapack-module-box legend {
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 0.2rem;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 850;
}

.datapack-module-box label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.datapack-module-box input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.datapack-module-box label span {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.05rem 0.5rem;
    height: 100%;
    padding: 0.72rem;
    border: 1px solid rgba(24, 38, 28, 0.1);
    border-radius: 14px;
    background: rgba(247, 249, 244, 0.8);
}

.datapack-module-box label i {
    grid-row: 1 / 3;
    align-self: center;
    color: rgba(48, 82, 51, 0.55);
}

.datapack-module-box label strong,
.datapack-module-box label small {
    display: block;
}

.datapack-module-box label small {
    color: rgba(23, 33, 29, 0.55);
    font-size: 0.67rem;
}

.datapack-module-box input:checked + span {
    border-color: rgba(80, 141, 81, 0.4);
    background: rgba(158, 212, 119, 0.17);
    box-shadow: inset 0 0 0 1px rgba(80, 141, 81, 0.1);
}

.datapack-module-box input:checked + span i {
    color: #437c47;
}

.datapack-details {
    border: 1px solid rgba(24, 38, 28, 0.09);
    border-radius: 16px;
    background: rgba(249, 250, 247, 0.72);
}

.datapack-details summary {
    padding: 0.85rem 1rem;
    color: var(--ink);
    font-weight: 850;
    cursor: pointer;
}

.datapack-details[open] summary {
    border-bottom: 1px solid rgba(24, 38, 28, 0.08);
}

.datapack-details > div,
.datapack-details > .studio-tool__field {
    margin: 0.85rem;
}

.datapack-import {
    display: grid;
    gap: 0.4rem;
}

.datapack-import__drop {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px dashed rgba(61, 111, 65, 0.4);
    border-radius: 15px;
    background: rgba(158, 212, 119, 0.08);
    cursor: pointer;
}

.datapack-import__drop > i {
    color: #4d8751;
    font-size: 1.35rem;
}

.datapack-import__drop strong,
.datapack-import__drop small {
    display: block;
}

.datapack-import__drop small {
    color: rgba(23, 33, 29, 0.58);
    font-size: 0.72rem;
}

.datapack-import__drop input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.datapack-editor {
    padding: 0;
    overflow: hidden;
}

.datapack-editor__header,
.datapack-validation__heading,
.datapack-export {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem 1.2rem;
}

.datapack-editor__header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.datapack-editor__header h3,
.datapack-validation__heading h3 {
    margin: 0;
    color: #eff8eb;
}

.datapack-editor .datapack-kicker {
    color: #9ed477;
}

.datapack-health {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.72rem;
    border: 1px solid rgba(158, 212, 119, 0.18);
    border-radius: 999px;
    background: rgba(158, 212, 119, 0.08);
    color: #ccebb7;
    font-size: 0.78rem;
}

.datapack-health__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ed477;
    box-shadow: 0 0 12px rgba(158, 212, 119, 0.55);
}

.datapack-health[data-state="warn"] {
    border-color: rgba(255, 195, 107, 0.24);
    background: rgba(255, 195, 107, 0.1);
    color: #ffd49b;
}

.datapack-health[data-state="warn"] .datapack-health__dot {
    background: #ffc36b;
}

.datapack-health[data-state="error"] {
    border-color: rgba(255, 115, 105, 0.25);
    background: rgba(255, 115, 105, 0.1);
    color: #ffb0a9;
}

.datapack-health[data-state="error"] .datapack-health__dot {
    background: #ff7369;
}

.datapack-editor__workspace {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    min-height: 620px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.datapack-explorer {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(3, 9, 15, 0.32);
}

.datapack-explorer__toolbar {
    display: flex;
    gap: 0.45rem;
    padding: 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.datapack-search {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    min-width: 0;
    padding: 0.52rem 0.62rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
}

.datapack-search input {
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
}

.datapack-explorer__toolbar button,
.datapack-code-actions button {
    min-width: 35px;
    height: 35px;
    padding: 0 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
}

.datapack-explorer__toolbar button:hover,
.datapack-code-actions button:hover {
    background: rgba(158, 212, 119, 0.13);
    color: #fff;
}

.datapack-file-tree {
    max-height: none;
    padding: 0.6rem;
    border-radius: 0;
    background: transparent;
}

.datapack-file-tree button {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datapack-file-tree button::before {
    content: "◇";
    margin-right: 0.45rem;
    color: #77a97b;
}

.datapack-file-tree button[data-json="true"]::before {
    content: "{ }";
    font-size: 0.68rem;
}

.datapack-file-tree button[data-function="true"]::before {
    content: "ƒ";
    color: #d2a96c;
}

.datapack-empty {
    display: block;
    padding: 1rem 0.5rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    text-align: center;
}

.datapack-explorer__summary {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.7rem;
}

.datapack-code-pane {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
}

.datapack-code-pane__bar {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: center;
    min-height: 58px;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.datapack-path-wrap {
    min-width: 0;
}

.datapack-path-wrap span,
.datapack-path-wrap strong {
    display: block;
}

.datapack-path-wrap span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.63rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.datapack-path-wrap strong {
    overflow: hidden;
    max-width: 430px;
    color: #eaf5e4;
    font: 0.78rem/1.5 Consolas, monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datapack-code-actions {
    display: flex;
    gap: 0.35rem;
}

.datapack-code-actions button span {
    margin-left: 0.3rem;
    font-size: 0.72rem;
}

.datapack-code-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 500px;
    background: #080f18;
}

.datapack-line-numbers {
    min-width: 45px;
    margin: 0;
    padding: 1rem 0.7rem;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.26);
    text-align: right;
    font: 0.82rem/1.55 Consolas, monospace;
    user-select: none;
}

.studio-tool__code.datapack-code {
    height: 100%;
    min-height: 500px;
    padding: 1rem;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    line-height: 1.55;
    white-space: pre;
}

.datapack-diagnostics {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    min-height: 42px;
    padding: 0.55rem 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: #a8ce9a;
    font-size: 0.73rem;
}

.datapack-diagnostics[data-state="error"] {
    color: #ffaaa3;
}

.datapack-diagnostics[data-state="warn"] {
    color: #ffd194;
}

.datapack-validation {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
}

.datapack-validation__heading {
    padding-bottom: 0.7rem;
}

.datapack-validation__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    padding: 0 1.2rem 1rem;
}

.datapack-validation__grid article {
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.04);
}

.datapack-validation__grid span,
.datapack-validation__grid strong,
.datapack-validation__grid small {
    display: block;
}

.datapack-validation__grid span {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.datapack-validation__grid strong {
    margin: 0.2rem 0;
    color: #eff8eb;
    font-size: 0.9rem;
}

.datapack-validation__grid small {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.66rem;
}

.datapack-issues {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0 1.2rem 1rem;
    list-style: none;
}

.datapack-issues:empty {
    display: none;
}

.datapack-issues li {
    padding: 0.55rem 0.7rem;
    border-left: 3px solid #ffc36b;
    border-radius: 0 9px 9px 0;
    background: rgba(255, 195, 107, 0.08);
    color: #e8dac6;
    font-size: 0.73rem;
}

.datapack-issues li[data-level="error"] {
    border-color: #ff7369;
    background: rgba(255, 115, 105, 0.08);
}

.datapack-export {
    align-items: end;
}

.datapack-export strong {
    color: #eff8eb;
}

.datapack-export .studio-tool__status {
    margin: 0.25rem 0 0 !important;
    font-size: 0.74rem;
}

.datapack-export__actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.datapack-guide {
    display: grid;
    grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1.4fr);
    gap: 2rem;
}

.datapack-guide ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.datapack-guide li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(24, 38, 28, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
}

.datapack-guide li > span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 9px;
    background: rgba(158, 212, 119, 0.18);
    color: #477c4b;
    font-weight: 900;
}

.datapack-guide li p {
    margin: 0.25rem 0 0;
    color: rgba(23, 33, 29, 0.64);
    font-size: 0.84rem;
}

@media (max-width: 1200px) {
    .datapack-template-bar {
        grid-template-columns: repeat(4, 1fr);
    }

    .datapack-template-bar > div {
        grid-column: 1 / -1;
    }

    .datapack-workspace {
        grid-template-columns: 1fr;
    }

    .datapack-settings {
        position: static;
        max-height: none;
    }
}

@media (max-width: 900px) {
    .datapack-capabilities {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .datapack-template-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .datapack-editor__workspace {
        grid-template-columns: 1fr;
    }

    .datapack-explorer {
        max-height: 280px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .datapack-validation__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .datapack-guide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .datapack-capabilities,
    .datapack-template-bar,
    .datapack-module-box,
    .datapack-validation__grid,
    .datapack-guide ol {
        grid-template-columns: 1fr;
    }

    .datapack-template-bar > div {
        grid-column: auto;
    }

    .datapack-code-pane__bar,
    .datapack-editor__header,
    .datapack-validation__heading,
    .datapack-export {
        align-items: stretch;
        flex-direction: column;
    }

    .datapack-code-actions {
        overflow-x: auto;
    }

    .datapack-code-actions button span {
        display: none;
    }

    .datapack-export__actions {
        justify-content: stretch;
    }

    .datapack-export__actions .btn {
        flex: 1 1 100%;
    }
}

@media (max-width: 1050px) {
    .studio-modules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .studio-tool__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .studio-modules {
        grid-template-columns: 1fr;
    }

    .studio-tool__fields,
    .social-checks,
    .embed-preview__fields {
        grid-template-columns: 1fr;
    }

    .studio-tool__row,
    .studio-tool__split {
        align-items: stretch;
        flex-direction: column;
    }

    .team-row {
        grid-template-columns: 14px minmax(0, 1fr) auto auto;
    }

    .team-row__score {
        grid-column: 2 / -1;
        grid-row: 2;
    }

    .event-stage {
        min-height: 480px;
    }

    .field-builder__row {
        grid-template-columns: 1fr auto;
    }

    .field-builder__row input:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .studio-tool button,
    .tool-suite button,
    .studio-tool input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    .tool-suite input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    .studio-tool select,
    .tool-suite select,
    .studio-tool textarea,
    .tool-suite textarea {
        min-height: 44px;
    }

    .team-row button,
    .field-builder__row button {
        min-width: 44px;
        width: 44px;
        height: 44px;
    }

    .tool-link-button {
        min-height: 44px;
        padding: 0.65rem 0.8rem;
    }
}