@import url("../style.css");

:root {
    --uefn-cyan:rgba(255,192,110,.9);
    --uefn-blue:rgba(239,106,34,.84);
    --uefn-gold:rgba(246,207,31,.94);
    --uefn-orange:rgba(212,88,28,.88);
}

.uefn-dev-theme {
    min-height:100vh;
    background:
        radial-gradient(circle at top, rgba(246,207,31,.08), transparent 24%),
        linear-gradient(180deg, #120905, #1c1009 52%, #130b06 100%);
}

.uefn-dev-theme .page-backdrop-overlay {
    background:
        radial-gradient(circle at 14% 18%, rgba(246,207,31,.16), rgba(246,207,31,0) 26%),
        radial-gradient(circle at 84% 20%, rgba(239,106,34,.18), rgba(239,106,34,0) 28%),
        radial-gradient(circle at 50% 88%, rgba(255,182,72,.14), rgba(255,182,72,0) 24%),
        linear-gradient(180deg, rgba(12,7,5,.48), rgba(12,7,5,.82) 40%, rgba(12,7,5,.94));
}

.uefn-dev-backdrop-layer {
    position:absolute;
    inset:-12%;
    opacity:.9;
    filter:blur(20px) saturate(1.08);
    transform:scale(1.08);
    animation:uefnBackdropFloat 16s ease-in-out infinite;
}

.uefn-dev-backdrop-layer-a {
    background:
        radial-gradient(circle at 18% 26%, rgba(246,207,31,.2), rgba(246,207,31,0) 20%),
        radial-gradient(circle at 78% 28%, rgba(239,106,34,.16), rgba(239,106,34,0) 24%);
}

.uefn-dev-backdrop-layer-b {
    background:
        radial-gradient(circle at 72% 18%, rgba(255,182,72,.2), rgba(255,182,72,0) 22%),
        radial-gradient(circle at 32% 74%, rgba(212,88,28,.16), rgba(212,88,28,0) 20%);
    animation-duration:20s;
    animation-direction:reverse;
}

.uefn-dev-backdrop-layer-c {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,245,222,.08), rgba(255,245,222,0) 18%),
        radial-gradient(circle at 56% 90%, rgba(212,88,28,.12), rgba(212,88,28,0) 22%);
    animation-duration:24s;
}

@keyframes uefnBackdropFloat {
    0%,
    100% {
        transform:scale(1.08) translate3d(0, 0, 0);
    }
    50% {
        transform:scale(1.12) translate3d(1.6%, -1.8%, 0);
    }
}

.uefn-dev-theme .site-header {
    width:min(1760px, calc(100% - 24px));
}

.uefn-dev-theme .site-main,
.uefn-dev-theme .site-footer {
    width:min(1180px, calc(100% - 32px));
}

.uefn-dev-tools-page .site-header {
    width:min(1840px, calc(100% - 24px));
}

.uefn-dev-tools-page .site-main,
.uefn-dev-tools-page .site-footer {
    width:min(1540px, calc(100% - 32px));
}

.uefn-dev-theme .site-nav a.is-current {
    color:var(--text);
    background:linear-gradient(180deg, rgba(246,207,31,.16), rgba(239,106,34,.08));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 18px rgba(0,0,0,.18);
}

.uefn-dev-theme .header-cta {
    border-color:rgba(239,106,34,.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 14px 28px rgba(0,0,0,.18);
}

.uefn-dev-main {
    min-height:100vh;
    padding:164px 0 54px;
}

.uefn-dev-hero,
.uefn-dev-panel,
.uefn-dev-cta-panel {
    max-width:1088px;
    margin-left:auto;
    margin-right:auto;
}

.uefn-dev-tools-page .uefn-dev-hero,
.uefn-dev-tools-page .uefn-dev-panel,
.uefn-dev-tools-page .uefn-dev-cta-panel {
    max-width:1460px;
}

.uefn-dev-hero {
    position:relative;
    padding:30px;
}

.uefn-dev-hero::after {
    content:attr(data-stage-label);
    position:absolute;
    top:20px;
    right:28px;
    font-family:"Teko", sans-serif;
    font-size:clamp(4.8rem, 11vw, 8.6rem);
    line-height:.85;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:rgba(255,236,199,.09);
    pointer-events:none;
}

.uefn-dev-hero-heading,
.uefn-dev-panel .panel-heading {
    position:relative;
    z-index:1;
}

.uefn-dev-hero-title {
    margin:0;
    max-width:12.2ch;
    font-family:"Teko", sans-serif;
    font-size:clamp(3.3rem, 7vw, 6rem);
    line-height:.9;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-wrap:balance;
}

.uefn-dev-lead {
    max-width:44ch;
    margin:0;
    color:rgba(241,236,228,.82);
    line-height:1.72;
}

.uefn-dev-hero-actions,
.uefn-dev-cta-actions,
.uefn-dev-card-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.uefn-dev-hero-actions {
    position:relative;
    z-index:1;
    margin-top:4px;
}

.uefn-dev-hero-metrics {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
    margin-top:10px;
}

.uefn-dev-metric,
.uefn-dev-process-card,
.uefn-dev-card {
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,206,113,.12);
    background:
        linear-gradient(180deg, rgba(255,245,222,.07), rgba(255,255,255,.018)),
        rgba(18,11,8,.86);
    box-shadow:0 18px 34px rgba(0,0,0,.2);
}

.uefn-dev-metric {
    display:grid;
    gap:8px;
    min-height:128px;
    padding:18px 18px 16px;
    border-radius:24px;
}

.uefn-dev-metric::before,
.uefn-dev-process-card::before,
.uefn-dev-card::before,
.uefn-dev-cta-panel::before {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:1px;
    background:linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,0));
    opacity:.45;
}

.uefn-dev-metric strong,
.uefn-dev-process-card h3,
.uefn-dev-card h3,
.uefn-dev-cta-copy h2 {
    font-family:"Teko", sans-serif;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.uefn-dev-metric strong {
    font-size:1.56rem;
    line-height:.9;
}

.uefn-dev-metric span {
    color:rgba(237,232,224,.76);
    line-height:1.65;
}

.uefn-dev-card-grid,
.uefn-dev-process-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:18px;
}

.uefn-dev-card-grid-compact .uefn-dev-card {
    min-height:290px;
}

.uefn-dev-card {
    display:grid;
    grid-template-rows:auto auto auto auto;
    gap:18px;
    min-height:356px;
    padding:22px;
    border-radius:28px;
    transition:transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.uefn-dev-card::after {
    content:"";
    position:absolute;
    inset:auto auto -18% -8%;
    width:160px;
    height:160px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,0) 74%);
    pointer-events:none;
}

.uefn-dev-card:hover {
    transform:translateY(-6px);
    border-color:rgba(255,255,255,.16);
    box-shadow:0 26px 46px rgba(0,0,0,.28);
}

.uefn-dev-card-systems {
    background:
        radial-gradient(circle at top right, rgba(246,207,31,.16), rgba(246,207,31,0) 28%),
        linear-gradient(180deg, rgba(255,245,222,.07), rgba(255,255,255,.018)),
        rgba(18,11,8,.86);
}

.uefn-dev-card-polish {
    background:
        radial-gradient(circle at top right, rgba(255,182,72,.16), rgba(255,182,72,0) 28%),
        linear-gradient(180deg, rgba(255,245,222,.07), rgba(255,255,255,.018)),
        rgba(18,11,8,.86);
}

.uefn-dev-card-release {
    background:
        radial-gradient(circle at top right, rgba(239,106,34,.16), rgba(239,106,34,0) 28%),
        linear-gradient(180deg, rgba(255,245,222,.07), rgba(255,255,255,.018)),
        rgba(18,11,8,.86);
}

.uefn-dev-card-mark {
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    border-radius:18px;
    font-family:"Teko", sans-serif;
    font-size:1.55rem;
    letter-spacing:.08em;
    color:#0a0d13;
    background:linear-gradient(180deg, #ffe28c, #f6cf1f 62%, #ef6a22);
    box-shadow:0 14px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,245,222,.42);
}

.uefn-dev-card-copy {
    display:grid;
    gap:10px;
}

.uefn-dev-card-copy h3,
.uefn-dev-process-card h3 {
    margin:0;
    font-size:2.05rem;
    line-height:.9;
}

.uefn-dev-card-copy p,
.uefn-dev-process-card p,
.uefn-dev-cta-copy p {
    margin:0;
    color:rgba(237,232,224,.78);
    line-height:1.68;
}

.uefn-dev-card-tags {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:0;
    margin:0;
    list-style:none;
}

.uefn-dev-card-tags li {
    padding:9px 12px 7px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(247,243,234,.78);
    font-size:.88rem;
}

.uefn-dev-card-actions {
    margin-top:auto;
}

.uefn-dev-process-card {
    display:grid;
    gap:12px;
    min-height:238px;
    padding:20px;
    border-radius:24px;
}

.uefn-dev-process-step {
    display:inline-flex;
    width:max-content;
    padding:8px 12px 6px;
    border-radius:999px;
    background:rgba(246,207,31,.08);
    border:1px solid rgba(255,206,113,.14);
    color:var(--uefn-gold);
    font-family:"Teko", sans-serif;
    font-size:1.12rem;
    letter-spacing:.12em;
}

.uefn-dev-cta-panel {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:end;
    gap:20px;
    padding:28px 30px;
    background:
        radial-gradient(circle at 82% 20%, rgba(239,106,34,.12), rgba(239,106,34,0) 24%),
        radial-gradient(circle at 14% 18%, rgba(246,207,31,.12), rgba(246,207,31,0) 24%),
        linear-gradient(180deg, rgba(255,245,222,.08), rgba(255,255,255,.02)),
        rgba(18,11,8,.86);
}

.uefn-dev-cta-copy {
    display:grid;
    gap:10px;
}

.uefn-dev-cta-copy h2 {
    margin:0;
    max-width:14ch;
    font-size:clamp(2.9rem, 6vw, 4.8rem);
    line-height:.9;
}

.uefn-dev-panel .panel-heading h2,
.uefn-dev-cta-panel .eyebrow {
    position:relative;
    z-index:1;
}

.uefn-dev-theme .about-mini-card::after {
    background:linear-gradient(90deg, rgba(246,207,31,.82), rgba(239,106,34,.4), rgba(255,255,255,0));
}

.uefn-dev-theme .about-mini-label {
    color:#ffd36a;
}

.uefn-dev-theme .site-footer {
    display:flex;
    flex-wrap:wrap;
    max-width:1088px;
}

.uefn-dev-theme .site-footer-disclaimer {
    flex-basis:100%;
    margin:0;
    padding:12px 14px;
    border-radius:18px;
    border:1px solid rgba(255,116,116,.3);
    background:linear-gradient(180deg, rgba(255,116,116,.18), rgba(255,116,116,.06));
    color:rgba(255,238,238,.96);
    box-shadow:0 0 0 1px rgba(255,116,116,.1), 0 12px 24px rgba(109,13,13,.18);
    font-size:.88rem;
    line-height:1.65;
}

.uefn-dev-hero .uefn-dev-lead:empty {
    display:none;
}

@media(max-width:980px) {
    .uefn-dev-hero-metrics,
    .uefn-dev-card-grid,
    .uefn-dev-process-grid,
    .uefn-dev-cta-panel {
        grid-template-columns:1fr;
    }

    .uefn-dev-hero::after {
        font-size:clamp(3.8rem, 18vw, 7rem);
        top:18px;
        right:18px;
    }

    .uefn-dev-cta-panel {
        align-items:start;
    }
}

@media(max-width:760px) {
    .uefn-dev-theme .site-header,
    .uefn-dev-theme .site-main,
    .uefn-dev-theme .site-footer {
        width:min(1180px, calc(100% - 24px));
    }

    .uefn-dev-main {
        padding:148px 0 40px;
    }

    .uefn-dev-hero,
    .uefn-dev-panel,
    .uefn-dev-cta-panel {
        padding:22px;
    }

    .uefn-dev-hero-title,
    .uefn-dev-panel .panel-heading h2,
    .uefn-dev-cta-copy h2 {
        max-width:none;
    }

    .uefn-dev-hero::after {
        top:14px;
        right:16px;
        font-size:clamp(3rem, 20vw, 5.6rem);
    }

    .uefn-dev-card,
    .uefn-dev-process-card,
    .uefn-dev-metric {
        min-height:auto;
    }
}

.uefn-dev-theme input,
.uefn-dev-theme select,
.uefn-dev-theme textarea,
.uefn-dev-theme pre,
.uefn-dev-theme code {
    -webkit-user-select:text;
    user-select:text;
}

.tool-panel {
    padding:28px 30px;
}

.tool-shell {
    display:grid;
    gap:18px;
}

.tool-shell-two-columns {
    grid-template-columns:minmax(320px, .9fr) minmax(0, 1.1fr);
    align-items:start;
}

.tool-shell-image {
    grid-template-columns:minmax(0, 1.15fr) minmax(320px, .85fr);
    align-items:start;
}

.tool-form-grid,
.tool-controls-card,
.tool-output-card,
.tool-preview-card,
.tool-plan-board,
.asset-card,
.audit-group {
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,206,113,.12);
    border-radius:26px;
    background:
        linear-gradient(180deg, rgba(255,245,222,.06), rgba(255,255,255,.018)),
        rgba(18,11,8,.88);
    box-shadow:0 18px 34px rgba(0,0,0,.22);
}

.tool-form-grid,
.tool-controls-card,
.tool-output-card,
.tool-preview-card,
.tool-plan-board {
    padding:20px;
}

.tool-form-grid {
    display:grid;
    gap:14px;
}

.tool-form-grid-narrow {
    grid-template-columns:1fr;
    padding:0;
    border:0;
    box-shadow:none;
    background:none;
}

.tool-field {
    display:grid;
    gap:9px;
}

.tool-field > span,
.tool-preview-meta span,
.asset-pill,
.audit-group-label,
.tool-plan-section strong,
.tool-output-header strong {
    font-size:.92rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.tool-field > span,
.tool-preview-meta span,
.audit-group-label {
    color:rgba(255,211,122,.82);
    font-family:"Teko", sans-serif;
}

.tool-field input[type="text"],
.tool-field input[type="number"],
.tool-field select,
.tool-code-output {
    width:100%;
    border:1px solid rgba(255,206,113,.12);
    border-radius:16px;
    background:rgba(14,8,6,.56);
    color:var(--text);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.tool-field input[type="text"],
.tool-field input[type="number"],
.tool-field select {
    min-height:52px;
    padding:0 16px;
    font-size:1rem;
}

.tool-field select {
    cursor:pointer;
}

.tool-field input[type="text"]:focus,
.tool-field input[type="number"]:focus,
.tool-field select:focus,
.tool-code-output:focus {
    outline:2px solid rgba(252,229,30,.32);
    outline-offset:2px;
}

.tool-field input[type="range"] {
    width:100%;
    accent-color:var(--accent);
}

.tool-field-toggle {
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    min-height:52px;
    padding:0 2px;
}

.tool-field-toggle input {
    width:20px;
    height:20px;
    accent-color:var(--accent);
}

.tool-output-card {
    display:grid;
    gap:14px;
}

.tool-output-header,
.tool-preview-meta,
.audit-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
}

.tool-inline-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.tool-inline-actions-wrap {
    margin-bottom:18px;
}

.tool-action,
.tool-input-file-label {
    min-height:48px;
}

.tool-code-output {
    min-height:500px;
    padding:18px;
    resize:vertical;
    font-family:"Space Grotesk", sans-serif;
    line-height:1.6;
    white-space:pre;
}

.tool-preview-card {
    display:grid;
    gap:14px;
}

.tool-preview-meta strong {
    font-family:"Teko", sans-serif;
    font-size:2rem;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.tool-canvas-wrap {
    position:relative;
    overflow:hidden;
    border-radius:22px;
    border:1px solid rgba(255,206,113,.12);
    background:
        linear-gradient(135deg, rgba(255,245,222,.02), rgba(255,255,255,.005)),
        rgba(14,8,6,.66);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

.tool-canvas-wrap canvas {
    display:block;
    width:100%;
    height:auto;
    background:#120905;
}

.tool-controls-card {
    display:grid;
    gap:16px;
}

.tool-plan-board {
    display:grid;
    gap:16px;
}

.tool-plan-section {
    display:grid;
    gap:10px;
}

.tool-plan-section strong {
    color:rgba(241,233,207,.92);
    font-family:"Teko", sans-serif;
}

.tool-beat-list {
    display:grid;
    gap:10px;
}

.tool-beat {
    display:grid;
    gap:6px;
    padding:14px 16px;
    border-radius:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}

.tool-beat strong {
    font-family:"Teko", sans-serif;
    font-size:1.38rem;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.tool-beat span,
.tool-bullet-list li,
.asset-card-copy p,
.audit-check {
    color:rgba(237,232,224,.78);
    line-height:1.68;
}

.tool-bullet-list {
    display:grid;
    gap:8px;
    padding-left:18px;
    margin:0;
}

.asset-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:18px;
}

.asset-card {
    display:grid;
    gap:18px;
    min-height:320px;
    padding:22px;
}

.asset-card-mark {
    display:grid;
    place-items:center;
    width:64px;
    height:64px;
    border-radius:18px;
    background:linear-gradient(180deg, #ffe28c, #f6cf1f 62%, #ef6a22);
    color:#0a0d13;
    font-family:"Teko", sans-serif;
    font-size:1.65rem;
    letter-spacing:.08em;
    box-shadow:0 14px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,245,222,.42);
}

.asset-card-copy {
    display:grid;
    gap:10px;
}

.asset-card-copy h3 {
    margin:0;
    font-family:"Teko", sans-serif;
    font-size:2.12rem;
    line-height:.9;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.asset-meta {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:auto;
}

.asset-pill {
    padding:10px 12px 8px;
    border-radius:999px;
    background:rgba(246,207,31,.08);
    border:1px solid rgba(255,206,113,.12);
    color:rgba(247,243,234,.8);
}

.audit-panel {
    display:grid;
    gap:18px;
}

.audit-progress {
    display:grid;
    gap:8px;
    min-width:min(360px, 100%);
}

.audit-progress-bar {
    position:relative;
    height:16px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(246,207,31,.06);
    border:1px solid rgba(255,206,113,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.audit-progress-bar span {
    position:absolute;
    inset:0 auto 0 0;
    width:0%;
    border-radius:inherit;
    background:linear-gradient(90deg, rgba(252,229,30,.94), rgba(99,233,199,.72));
    box-shadow:0 0 24px rgba(252,229,30,.22);
    transition:width .22s ease;
}

.audit-progress strong {
    font-family:"Teko", sans-serif;
    font-size:1.32rem;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.audit-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:16px;
}

.discord-panel-shared {
    max-width:1088px;
    margin:26px auto 0;
}

.verse-search-panel {
    margin-bottom:18px;
}

.verse-search-note {
    margin:0;
    color:rgba(237,232,224,.74);
    line-height:1.6;
}

.verse-grid {
    display:grid;
    gap:18px;
}

.verse-card {
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    border-radius:28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
        rgba(10,13,20,.86);
    box-shadow:0 18px 34px rgba(0,0,0,.22);
    padding:22px;
}

.verse-card-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    margin-bottom:16px;
}

.verse-card-copy {
    display:grid;
    gap:10px;
    min-width:0;
}

.verse-card-copy h3 {
    margin:0;
    font-family:"Teko", sans-serif;
    font-size:2.1rem;
    line-height:.9;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.verse-card-copy p {
    margin:0;
    color:rgba(237,232,224,.78);
    line-height:1.66;
}

.verse-card-preview-note {
    color:rgba(252,229,30,.86);
    font-size:.95rem;
}

.verse-card-code {
    margin:0;
    padding:18px;
    overflow:auto;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(5,7,10,.52);
    color:rgba(247,243,234,.92);
    font-family:"Space Grotesk", sans-serif;
    line-height:1.58;
    white-space:pre-wrap;
    word-break:break-word;
}

.audit-group {
    display:grid;
    gap:14px;
    padding:20px;
}

.audit-group-label {
    color:var(--accent);
}

.audit-check {
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    gap:12px;
    align-items:start;
}

.audit-check input {
    width:18px;
    height:18px;
    margin-top:4px;
    accent-color:var(--accent);
}

@media(max-width:980px) {
    .tool-shell-two-columns,
    .tool-shell-image,
    .asset-grid,
    .audit-grid {
        grid-template-columns:1fr;
    }

    .tool-output-header,
    .tool-preview-meta,
    .audit-toolbar,
    .verse-card-head {
        flex-direction:column;
        align-items:flex-start;
    }
}

@media(max-width:760px) {
    .tool-panel {
        padding:22px;
    }

    .asset-card,
    .audit-group,
    .tool-form-grid,
    .tool-output-card,
    .tool-preview-card,
    .tool-controls-card,
    .tool-plan-board {
        padding:18px;
    }

    .tool-code-output {
        min-height:360px;
    }
}

.tool-output-card-stack {
    display:grid;
    gap:18px;
}

.tool-code-output-compact {
    min-height:320px;
}

.tool-preview-stage {
    display:grid;
    place-items:center;
    min-height:300px;
    padding:24px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.06), rgba(255,255,255,0) 34%),
        linear-gradient(180deg, rgba(5,7,10,.64), rgba(5,7,10,.84));
}

.tool-preview-stage-banner {
    min-height:220px;
}

.tool-preview-stage-objective {
    min-height:260px;
}

.tool-chip {
    display:inline-flex;
    align-items:center;
    width:max-content;
    padding:8px 12px 6px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);
    color:rgba(247,243,234,.86);
    font-family:"Teko", sans-serif;
    font-size:1rem;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.ui-card-preview,
.alert-banner-preview,
.objective-preview {
    width:100%;
    border:1px solid rgba(255,255,255,.1);
    color:var(--text);
    box-shadow:0 24px 48px rgba(0,0,0,.24);
}

.ui-card-preview {
    display:grid;
    gap:14px;
    max-width:680px;
    padding:24px;
    border-radius:28px;
}

.ui-card-preview strong,
.alert-banner-preview strong,
.objective-preview strong {
    font-family:"Teko", sans-serif;
    font-size:2.4rem;
    line-height:.92;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.ui-card-preview p,
.alert-banner-preview span,
.objective-preview p,
.objective-preview-meta-row span {
    color:rgba(237,232,224,.8);
    line-height:1.62;
}

.ui-preview-button {
    width:max-content;
    min-width:164px;
}

.alert-banner-preview {
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    gap:16px;
    max-width:880px;
    min-height:110px;
    padding:22px 24px;
    border-radius:24px;
}

.alert-banner-preview-time {
    font-family:"Teko", sans-serif;
    font-size:2rem;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.objective-preview {
    display:grid;
    gap:12px;
    max-width:360px;
    min-height:220px;
    padding:22px;
    border-radius:26px;
}

.objective-preview-progress {
    position:relative;
    height:12px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
}

.objective-preview-fill {
    position:absolute;
    inset:0 auto 0 0;
    width:30%;
    border-radius:inherit;
    background:var(--tool-accent, #7DA7FF);
    box-shadow:0 0 22px color-mix(in srgb, var(--tool-accent, #7DA7FF) 44%, transparent);
}

.objective-preview-meta-row {
    display:grid;
    gap:8px;
}

.audit-grid-cards {
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}

.audit-card {
    position:relative;
    overflow:hidden;
    display:grid;
    gap:18px;
    min-height:220px;
    padding:20px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:26px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
        rgba(10,13,20,.86);
    box-shadow:0 18px 34px rgba(0,0,0,.22);
}

.audit-card-copy {
    display:grid;
    gap:10px;
}

.audit-card-index {
    color:rgba(252,229,30,.92);
    font-family:"Teko", sans-serif;
    font-size:1.08rem;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.audit-card-copy strong {
    font-family:"Teko", sans-serif;
    font-size:2rem;
    line-height:.9;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.audit-card-copy p {
    margin:0;
    color:rgba(237,232,224,.78);
    line-height:1.65;
}

.audit-check-card {
    margin-top:auto;
    padding:14px 16px;
    border-radius:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}

@media(max-width:980px) {
    .alert-banner-preview {
        grid-template-columns:1fr;
        justify-items:start;
    }
}

@media(max-width:760px) {
    .tool-preview-stage,
    .tool-preview-stage-banner,
    .tool-preview-stage-objective {
        min-height:auto;
        padding:18px;
    }

    .ui-card-preview,
    .alert-banner-preview,
    .objective-preview {
        max-width:100%;
    }
}

.canvas-builder-shell {
    display:grid;
    grid-template-columns:minmax(340px, 420px) minmax(0, 1fr);
    gap:22px;
}

.uefn-dev-tools-page .canvas-builder-shell {
    grid-template-columns:minmax(420px, 520px) minmax(0, 1.3fr);
    gap:26px;
}

.canvas-builder-sidebar,
.canvas-builder-main,
.canvas-global-grid,
.canvas-slot-list,
.canvas-slot-grid,
.canvas-global-actions {
    display:grid;
    gap:16px;
}

.canvas-global-grid,
.canvas-slot-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.canvas-global-actions {
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.canvas-autosave-pill,
.canvas-slots-count {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px 6px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.05);
    color:rgba(237,232,224,.82);
    font-family:"Teko", sans-serif;
    font-size:1rem;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.canvas-autosave-pill.is-flashing {
    box-shadow:0 0 0 1px rgba(252,229,30,.32), 0 0 18px rgba(252,229,30,.22);
}

.canvas-slot-card {
    display:grid;
    gap:16px;
    padding:18px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), rgba(9,12,18,.86);
    box-shadow:0 18px 32px rgba(0,0,0,.2);
}

.canvas-slot-card.is-selected {
    border-color:rgba(252,229,30,.34);
    box-shadow:0 18px 32px rgba(0,0,0,.2), 0 0 0 1px rgba(252,229,30,.18);
}

.canvas-slot-card.is-generated_button {
    box-shadow:0 18px 32px rgba(0,0,0,.2), inset 0 0 0 1px rgba(252,229,30,.12);
}

.canvas-slot-card.is-generated_color {
    box-shadow:0 18px 32px rgba(0,0,0,.2), inset 0 0 0 1px rgba(99,233,199,.12);
}

.canvas-slot-head,
.canvas-slot-head-copy,
.canvas-slot-actions-mini {
    display:flex;
    align-items:center;
    gap:12px;
}

.canvas-slot-head {
    justify-content:space-between;
}

.canvas-slot-head-copy {
    min-width:0;
}

.canvas-slot-index {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(252,229,30,.92);
    font-family:"Teko", sans-serif;
    font-size:1.05rem;
    letter-spacing:.12em;
}

.canvas-slot-heading {
    min-width:0;
    font-family:"Teko", sans-serif;
    font-size:1.5rem;
    line-height:.92;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.tool-preview-stage-canvas {
    min-height:420px;
}

.uefn-dev-tools-page .tool-preview-stage-canvas {
    min-height:520px;
}

.canvas-preview-card-main,
.canvas-output-card,
.canvas-global-card,
.canvas-slots-card {
    display:grid;
    gap:18px;
}

.canvas-preview-board {
    position:relative;
    width:min(100%, 920px);
    aspect-ratio:16 / 9;
    overflow:hidden;
    border-radius:26px;
    border:1px solid rgba(255,255,255,.08);
    background:radial-gradient(circle at top, rgba(255,255,255,.06), rgba(255,255,255,0) 42%), linear-gradient(180deg, rgba(8,11,17,.78), rgba(5,7,10,.92));
    box-shadow:0 24px 48px rgba(0,0,0,.28);
}

.uefn-dev-tools-page .canvas-preview-board {
    width:min(100%, 1240px);
}

.canvas-preview-board.is-editing {
    cursor:grabbing;
}

.canvas-preview-grid,
.canvas-preview-safe,
.canvas-preview-slots {
    position:absolute;
    inset:0;
}

.canvas-preview-grid {
    background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:8.333% 12.5%;
    mask-image:linear-gradient(180deg, rgba(0,0,0,.48), rgba(0,0,0,.9));
}

.canvas-preview-safe {
    inset:8%;
    border:1px dashed rgba(252,229,30,.28);
    border-radius:24px;
}

.canvas-preview-slot {
    position:absolute;
    min-width:24px;
    min-height:24px;
    overflow:visible;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    touch-action:none;
    user-select:none;
    cursor:grab;
}

.canvas-preview-slot-body {
    position:absolute;
    inset:0;
    border-radius:4px;
    background:linear-gradient(180deg, color-mix(in srgb, var(--slot-accent, #FCE51E) 88%, rgba(10,12,18,.18)), color-mix(in srgb, var(--slot-accent, #FCE51E) 72%, rgba(10,12,18,.3)));
    box-shadow:0 12px 22px rgba(0,0,0,.22);
}

.canvas-preview-slot-badge {
    position:absolute;
    left:0;
    bottom:calc(100% + 10px);
    display:grid;
    gap:2px;
    min-width:0;
    padding:8px 10px 6px;
    border-radius:12px;
    background:rgba(6,8,12,.92);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 18px rgba(0,0,0,.24);
    pointer-events:none;
}

.canvas-preview-slot-badge strong,
.canvas-preview-slot-badge span {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.canvas-preview-slot-badge strong {
    font-family:"Teko", sans-serif;
    font-size:1rem;
    line-height:.9;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#fff;
}

.canvas-preview-slot-badge span {
    color:rgba(237,232,224,.68);
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.canvas-preview-slot-handle {
    position:absolute;
    right:-8px;
    bottom:-8px;
    width:16px;
    height:16px;
    padding:0;
    border:0;
    border-radius:4px;
    background:#fce51e;
    box-shadow:0 0 0 1px rgba(7,9,13,.38), 0 8px 14px rgba(0,0,0,.24);
    cursor:nwse-resize;
}

.canvas-preview-slot.is-generated_button .canvas-preview-slot-body {
    background:linear-gradient(180deg, color-mix(in srgb, var(--slot-accent, #FCE51E) 94%, white 8%), color-mix(in srgb, var(--slot-accent, #FCE51E) 84%, rgba(10,12,18,.14)));
}

.canvas-preview-slot.is-generated_color .canvas-preview-slot-body {
    background:var(--slot-accent, #63E9C7);
}

.canvas-preview-slot.is-editable_ref .canvas-preview-slot-body {
    background:
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in srgb, var(--slot-accent, #63E9C7) 56%, rgba(255,255,255,.06)), color-mix(in srgb, var(--slot-accent, #63E9C7) 26%, rgba(5,7,10,.64)));
    background-size:22px 22px, 22px 22px, 100% 100%;
}

.canvas-preview-slot.is-selected .canvas-preview-slot-body {
    box-shadow:0 12px 22px rgba(0,0,0,.22), 0 0 0 2px rgba(255,255,255,.9), 0 0 0 5px color-mix(in srgb, var(--slot-accent, #FCE51E) 42%, transparent);
}

.canvas-preview-slot.is-selected .canvas-preview-slot-badge {
    border-color:rgba(252,229,30,.32);
}

.canvas-preview-slot:active {
    cursor:grabbing;
}

.canvas-preview-note {
    position:absolute;
    right:18px;
    bottom:18px;
    padding:8px 12px 6px;
    border-radius:999px;
    background:rgba(5,7,10,.72);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(237,232,224,.78);
    font-family:"Teko", sans-serif;
    font-size:1rem;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.canvas-empty-state {
    padding:18px;
}

@media(max-width:1080px) {
    .canvas-builder-shell {
        grid-template-columns:1fr;
    }

    .uefn-dev-tools-page .canvas-builder-shell {
        grid-template-columns:1fr;
    }
}

@media(max-width:760px) {
    .canvas-global-grid,
    .canvas-slot-grid,
    .canvas-global-actions {
        grid-template-columns:1fr;
    }

    .canvas-slot-head,
    .canvas-slot-actions-mini {
        flex-wrap:wrap;
    }
}