:root {
    --bg-page: #f2f5f7;
    --bg-panel: #ffffff;
    --bg-sidebar: #0f1b21;
    --bg-card: #ffffff;
    --text-main: #12202a;
    --text-muted: #55707e;
    --text-light: #e7f0f5;
    --border: #d7e2e8;
    --accent: #0e9f88;
    --accent-strong: #0a7f6c;
    --danger: #cb5b4f;
    --shadow-lg: 0 24px 48px rgba(14, 35, 49, 0.18);
    --shadow-sm: 0 8px 18px rgba(12, 39, 54, 0.08);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Franklin Gothic Medium", sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-main);
    background: radial-gradient(circle at top right, #d6ece8 0%, var(--bg-page) 45%, #ecf2f6 100%);
}

.app-bg-shape {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    border-radius: 999px;
    filter: blur(3px);
}

.app-bg-shape-a {
    width: 420px;
    height: 420px;
    right: -120px;
    top: -100px;
    background: rgba(14, 159, 136, 0.12);
}

.app-bg-shape-b {
    width: 320px;
    height: 320px;
    left: -80px;
    bottom: -110px;
    background: rgba(86, 145, 192, 0.12);
}

.layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    height: 100vh;
    padding: 10px;
    overflow: hidden;
}

.sidebar {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    min-width: 0;
    min-height: 0;
    background: linear-gradient(180deg, #12242d 0%, var(--bg-sidebar) 100%);
    color: var(--text-light);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    overflow: hidden;
}

.sidebar-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-section-head {
    display: grid;
    gap: 2px;
    padding: 4px 2px 0;
}

.sidebar-section-head strong {
    font-size: 16px;
    color: #f4fbff;
    letter-spacing: 0.02em;
}

.sidebar-kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(195, 221, 233, 0.65);
}

.account-btn {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(141, 175, 191, 0.42);
    background: rgba(25, 51, 64, 0.95);
    color: #eaf7ff;
    padding: 9px 11px;
    text-align: left;
    line-height: 1.35;
    white-space: normal;
    cursor: pointer;
}

.account-btn:hover {
    border-color: rgba(102, 174, 214, 0.7);
}

.account-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: min(320px, calc(100vw - 32px));
    max-height: min(72vh, 560px);
    background: rgba(18, 36, 45, 0.98);
    border: 1px solid rgba(164, 198, 214, 0.25);
    border-radius: 14px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: auto;
    box-shadow: var(--shadow-lg);
    z-index: 60;
}

.account-menu-section {
    display: grid;
    gap: 6px;
}

.account-menu-section.is-scrollable {
    max-height: 240px;
    overflow: auto;
    padding-right: 4px;
}

.account-menu-search-wrap {
    padding: 2px 0 4px;
}

.account-menu-search {
    min-height: 38px;
    background: rgba(244, 251, 253, 0.98);
}

.account-menu-title {
    padding: 2px 4px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(200, 217, 227, 0.7);
}

.account-menu-item {
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    color: #c8d9e3;
    text-align: left;
    padding: 7px 9px;
    display: grid;
    gap: 3px;
    cursor: pointer;
}

.account-menu-item.is-static {
    cursor: default;
}

.account-menu-item strong {
    font-size: 13px;
    line-height: 1.2;
}

.account-menu-item small {
    font-size: 11px;
    color: rgba(200, 217, 227, 0.72);
}

.account-menu-item:hover {
    border-color: rgba(14, 159, 136, 0.7);
    background: rgba(14, 159, 136, 0.12);
    color: #f3feff;
}

.account-menu-item.is-static:hover {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.02);
    color: #c8d9e3;
}

.account-menu-item.active {
    border-color: rgba(102, 174, 214, 0.8);
    background: rgba(102, 174, 214, 0.2);
    color: #f3feff;
}

.account-menu-item.is-danger {
    border-color: rgba(203, 91, 79, 0.42);
    background: rgba(203, 91, 79, 0.08);
    color: #ffd8d2;
    box-shadow: inset 0 0 0 1px rgba(203, 91, 79, 0.18);
}

.account-menu-item.is-danger small {
    color: rgba(255, 216, 210, 0.8);
}

.account-menu-item.is-danger:hover {
    border-color: rgba(203, 91, 79, 0.72);
    background: rgba(203, 91, 79, 0.18);
    color: #fff3f0;
}

.account-menu-note {
    padding: 2px 4px 4px;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(200, 217, 227, 0.74);
}

.panel {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    padding: 0 2px 6px;
    overflow: auto;
}

.layout.layout-sidebar-hidden {
    grid-template-columns: minmax(0, 1fr);
}

.layout.layout-sidebar-hidden .sidebar {
    display: none;
}

.layout.layout-sidebar-hidden .panel {
    grid-column: 1;
    padding: 0 2px 8px;
}

.layout.layout-home-view .panel {
    padding-left: 0;
    padding-right: 0;
}

.layout.layout-sidebar-hidden .panel-header,
.layout.layout-sidebar-hidden #dashboardView,
.layout.layout-sidebar-hidden #settingsView {
    max-width: 1260px;
    margin-left: auto;
    margin-right: auto;
}

#dashboardView {
    width: min(1220px, 100%);
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 18px;
    border-radius: 26px;
    border: 1px solid rgba(172, 199, 206, 0.4);
    background:
        linear-gradient(180deg, rgba(247, 251, 252, 0.96) 0%, rgba(237, 246, 245, 0.94) 52%, rgba(232, 245, 242, 0.92) 100%);
    box-shadow: 0 20px 48px rgba(32, 66, 78, 0.12);
}

.layout.layout-sidebar-hidden #dashboardView {
    width: min(1220px, calc(100vw - 32px));
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
}

#dashboardView::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(119, 151, 164, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(119, 151, 164, 0.06) 1px, transparent 1px),
        radial-gradient(circle at top right, rgba(92, 210, 175, 0.2) 0%, transparent 33%),
        radial-gradient(circle at 85% 55%, rgba(170, 232, 210, 0.16) 0%, transparent 28%),
        radial-gradient(circle at bottom left, rgba(146, 188, 213, 0.12) 0%, transparent 24%);
    background-size: 24px 24px, 24px 24px, auto, auto, auto;
    opacity: 0.62;
    pointer-events: none;
}

#dashboardView::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(112deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 32%, rgba(123, 220, 186, 0.1) 68%, rgba(86, 189, 151, 0.12) 100%);
    pointer-events: none;
}

#dashboardView > * {
    position: relative;
    z-index: 1;
}

#homeView {
    width: min(1260px, 100%);
    max-width: 1260px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 22px;
    border-radius: 28px;
    border: 1px solid rgba(79, 113, 126, 0.28);
    background: linear-gradient(180deg, rgba(5, 14, 20, 0.98) 0%, rgba(7, 18, 24, 0.96) 100%);
    box-shadow: 0 28px 56px rgba(4, 14, 19, 0.26);
}

.layout.layout-sidebar-hidden #homeView {
    width: min(1260px, calc(100vw - 32px));
    max-width: 1260px;
}

#homeView::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(93, 120, 131, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93, 120, 131, 0.08) 1px, transparent 1px),
        radial-gradient(circle at top right, rgba(31, 201, 163, 0.16) 0%, transparent 30%),
        radial-gradient(circle at bottom left, rgba(32, 118, 151, 0.12) 0%, transparent 24%);
    background-size: 26px 26px, 26px 26px, auto, auto;
    opacity: 0.66;
    pointer-events: none;
}

#homeView::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.02) 0%, transparent 36%, rgba(32, 201, 163, 0.08) 100%);
    pointer-events: none;
}

#homeView > * {
    position: relative;
    z-index: 1;
}

.home-shell {
    display: grid;
    gap: 24px;
}

.home-hero-card,
.home-story-card,
.home-transform-card,
.home-footer-strip {
    border-radius: 28px;
    border: 1px solid rgba(88, 121, 135, 0.2);
    background: linear-gradient(180deg, rgba(8, 18, 24, 0.9) 0%, rgba(9, 22, 29, 0.88) 100%);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(10px);
}

.home-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.82fr);
    gap: 30px;
    padding: 34px 36px;
    align-items: center;
}

.home-hero-copy {
    min-width: 0;
    max-width: 660px;
}

.home-kicker,
.home-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #79e3cf;
}

.home-kicker::before,
.home-section-kicker::before {
    content: "";
    width: 24px;
    height: 1px;
    background: rgba(121, 227, 207, 0.6);
}

.home-hero-copy h1 {
    margin: 18px 0 16px;
    max-width: 620px;
    font-size: clamp(40px, 4.6vw, 62px);
    line-height: 0.98;
    letter-spacing: -0.05em;
    color: #f4fcff;
}

.home-hero-copy p,
.home-transform-copy p,
.home-story-card p {
    margin: 0;
    max-width: 620px;
    font-size: 15px;
    line-height: 1.78;
    color: rgba(205, 225, 234, 0.78);
}

.home-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.home-primary-btn {
    min-width: 220px;
    min-height: 48px;
    font-size: 15px;
    font-weight: 800;
    border-radius: 14px;
    background: linear-gradient(135deg, #20c6aa 0%, #0f8f79 52%, #0b6e5f 100%);
    box-shadow: 0 14px 26px rgba(14, 159, 136, 0.24);
}

.home-secondary-btn {
    min-width: 178px;
    min-height: 48px;
    border-radius: 14px;
    background: rgba(238, 247, 250, 0.05);
    border-color: rgba(109, 147, 162, 0.22);
    color: #d9edf3;
}

.home-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
}

.home-benefit-card {
    display: grid;
    gap: 8px;
    padding: 18px 18px 17px;
    border-radius: 18px;
    border: 1px solid rgba(93, 129, 142, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.home-benefit-card strong,
.home-story-card h2,
.home-story-card h3,
.home-transform-copy h2,
.home-footer-strip strong {
    color: #f2fbff;
}

.home-benefit-card strong {
    font-size: 17px;
    line-height: 1.2;
}

.home-benefit-card span {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(201, 220, 229, 0.7);
}

.home-node-scene {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.home-node-stage {
    position: relative;
    width: min(100%, 430px);
    min-height: 350px;
    margin-left: auto;
    border-radius: 24px;
    border: 1px solid rgba(92, 127, 140, 0.14);
    background:
        radial-gradient(circle at top right, rgba(27, 194, 160, 0.14) 0%, transparent 24%),
        linear-gradient(180deg, rgba(9, 21, 27, 0.92) 0%, rgba(7, 17, 22, 0.94) 100%);
    overflow: hidden;
}

.home-node-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(101, 130, 142, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(101, 130, 142, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.5;
}

.home-node {
    position: absolute;
    display: grid;
    gap: 4px;
    min-width: 116px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(100, 142, 157, 0.18);
    background: linear-gradient(180deg, rgba(250, 255, 255, 0.09) 0%, rgba(230, 247, 245, 0.035) 100%);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
    animation: home-node-float 6.2s ease-in-out infinite;
}

.home-node small {
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(117, 224, 203, 0.82);
}

.home-node strong {
    font-size: 15px;
    color: #f3fbff;
}

.home-node-input { left: 10%; top: 14%; animation-delay: 0s; }
.home-node-cut { left: 42%; top: 8%; animation-delay: -1s; }
.home-node-brand { right: 12%; top: 38%; animation-delay: -2s; }
.home-node-variants { left: 18%; bottom: 16%; animation-delay: -1.5s; }
.home-node-export { right: 10%; bottom: 14%; animation-delay: -2.8s; }

.home-node-link,
.home-node-pulse {
    position: absolute;
    pointer-events: none;
}

.home-node-link {
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(57, 196, 165, 0.08) 0%, rgba(57, 196, 165, 0.44) 50%, rgba(57, 196, 165, 0.08) 100%);
    transform-origin: left center;
    overflow: hidden;
}

.home-node-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(150, 252, 230, 0.88) 50%, transparent 100%);
    animation: home-link-scan 3.6s linear infinite;
}

.home-node-link.link-a { left: 24%; top: 25%; width: 21%; transform: rotate(-7deg); }
.home-node-link.link-b { left: 51%; top: 24%; width: 17%; transform: rotate(29deg); }
.home-node-link.link-c { left: 28%; top: 62%; width: 24%; transform: rotate(-29deg); }
.home-node-link.link-d { left: 58%; top: 68%; width: 23%; transform: rotate(-7deg); }
.home-node-link.link-b::after { animation-delay: -1.2s; }
.home-node-link.link-c::after { animation-delay: -2.4s; }
.home-node-link.link-d::after { animation-delay: -0.8s; }

.home-node-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7df3dd;
    box-shadow: 0 0 0 7px rgba(125, 243, 221, 0.07), 0 0 18px rgba(125, 243, 221, 0.34);
    animation: home-node-pulse 3.4s linear infinite;
}

.home-node-pulse.pulse-a { left: 39%; top: 23%; }
.home-node-pulse.pulse-b { left: 63%; top: 47%; animation-delay: -1.2s; }
.home-node-pulse.pulse-c { left: 55%; top: 70%; animation-delay: -2.2s; }

.home-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    grid-template-areas:
        "overview speed"
        "overview testing";
    gap: 16px;
}

.home-story-card {
    display: grid;
    gap: 14px;
    padding: 24px;
}

.home-story-card-overview {
    grid-area: overview;
    padding: 30px;
}

.home-story-card-speed {
    grid-area: speed;
}

.home-story-card-testing {
    grid-area: testing;
}

.home-transform-copy h2 {
    margin: 0;
    font-size: 36px;
    line-height: 1.03;
    letter-spacing: -0.035em;
}

.home-story-card h2,
.home-story-card h3 {
    margin: 0;
    max-width: 240px;
    font-size: 23px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.home-transform-card {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(320px, 0.92fr);
    gap: 32px;
    padding: 30px 32px;
    align-items: center;
}

.home-transform-copy {
    display: grid;
    gap: 14px;
    max-width: 470px;
}

.home-ad-lab {
    display: grid;
    grid-template-columns: 160px 76px minmax(210px, 1fr);
    gap: 16px;
    align-items: center;
}

.home-ad-source-card,
.home-ad-target-card {
    border-radius: 20px;
    border: 1px solid rgba(96, 129, 141, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.025) 100%);
    padding: 12px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}

.home-ad-source-card {
    width: 160px;
}

.home-ad-source-card strong,
.home-ad-format {
    display: block;
}

.home-ad-source-card strong {
    margin-top: 6px;
    color: #f4fdff;
    font-size: 15px;
}

.home-ad-format {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(117, 224, 203, 0.78);
}

.home-ad-preview {
    position: relative;
    margin-top: 10px;
    border-radius: 16px;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 24%, rgba(255, 220, 171, 0.64) 0%, transparent 19%),
        radial-gradient(circle at 34% 32%, rgba(44, 200, 171, 0.24) 0%, transparent 18%),
        linear-gradient(180deg, rgba(35, 54, 61, 0.8) 0%, rgba(16, 26, 31, 0.96) 100%);
    animation: home-ad-glow 7s ease-in-out infinite;
}

.home-ad-preview::before,
.home-ad-preview::after {
    content: "";
    position: absolute;
}

.home-ad-preview::before {
    inset: 0;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 54%);
}

.home-ad-preview::after {
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 15%;
    border-radius: 999px;
    background: rgba(8, 19, 25, 0.34);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.home-ad-preview-source { aspect-ratio: 9 / 16; }
.home-ad-preview-tall { aspect-ratio: 4 / 5; }
.home-ad-preview-square { aspect-ratio: 1 / 1; }
.home-ad-preview-wide { aspect-ratio: 16 / 9; }

.home-ad-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #113b46;
    font-size: 11px;
    font-weight: 800;
}

.home-ad-arrows {
    display: grid;
    gap: 20px;
}

.home-ad-arrow {
    position: relative;
    display: block;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(67, 215, 183, 0.08) 0%, rgba(67, 215, 183, 0.68) 60%, rgba(67, 215, 183, 0.14) 100%);
    overflow: hidden;
}

.home-ad-arrow::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid rgba(112, 239, 213, 0.88);
    border-right: 2px solid rgba(112, 239, 213, 0.88);
    transform: translateY(-50%) rotate(45deg);
}

.home-ad-arrow::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 45%, transparent 100%);
    animation: home-arrow-scan 2.8s ease-in-out infinite;
}

.home-ad-arrow.arrow-mid::after {
    animation-delay: -0.8s;
}

.home-ad-arrow.arrow-bot::after {
    animation-delay: -1.6s;
}

.home-ad-target-grid {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.home-ad-target-card {
    width: min(100%, 166px);
}

.home-ad-target-card:nth-child(2) {
    transform: translateX(-18px);
}

.home-ad-target-card:nth-child(3) {
    transform: translateX(-4px);
}

.home-footer-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
}

.home-footer-strip strong {
    display: block;
    margin-top: 8px;
    font-size: 24px;
    line-height: 1.08;
}

.home-footer-btn {
    min-width: 208px;
    min-height: 48px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
}

.site-legal-footer::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(121, 227, 207, 0.42) 18%, rgba(95, 226, 255, 0.36) 50%, rgba(121, 227, 207, 0.42) 82%, transparent 100%);
    opacity: 0.68;
}

.site-legal-footer {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 14px 18px;
    border-radius: 22px;
    border: 1px solid rgba(88, 121, 135, 0.2);
    background:
        radial-gradient(circle at 14% 18%, rgba(121, 227, 207, 0.14) 0%, transparent 28%),
        radial-gradient(circle at 86% 80%, rgba(95, 226, 255, 0.12) 0%, transparent 24%),
        linear-gradient(180deg, rgba(8, 18, 24, 0.94) 0%, rgba(9, 22, 29, 0.9) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 30px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(14px);
    overflow: hidden;
}

.site-legal-footer::after {
    content: "";
    position: absolute;
    width: 128px;
    height: 128px;
    top: -68px;
    right: -20px;
    background: radial-gradient(circle, rgba(121, 227, 207, 0.18) 0%, transparent 68%);
    filter: blur(12px);
    pointer-events: none;
    opacity: 0.55;
}

.site-legal-footer-links {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.site-legal-footer-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid rgba(109, 147, 162, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(235, 246, 250, 0.04) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: #e6f3f7;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.site-legal-footer-links a:hover {
    border-color: rgba(121, 227, 207, 0.45);
    background: linear-gradient(180deg, rgba(121, 227, 207, 0.16) 0%, rgba(95, 226, 255, 0.08) 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px rgba(4, 13, 18, 0.18);
}

.workspace-legal-footer {
    width: 100%;
    margin-top: 26px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 16px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 24%, rgba(121, 227, 207, 0.08) 0%, transparent 24%),
        radial-gradient(circle at 88% 76%, rgba(95, 226, 255, 0.07) 0%, transparent 20%),
        linear-gradient(180deg, rgba(11, 23, 30, 0.95) 0%, rgba(12, 26, 34, 0.92) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 22px rgba(0, 0, 0, 0.12);
}

.workspace-legal-footer::before {
    left: 22px;
    right: 22px;
    opacity: 0.5;
}

.workspace-legal-footer::after {
    width: 96px;
    height: 96px;
    top: -52px;
    right: -18px;
    opacity: 0.38;
}

.workspace-legal-footer .site-legal-footer-links {
    gap: 8px;
    width: 100%;
}

.workspace-legal-footer .site-legal-footer-links a {
    min-height: 34px;
    padding: 0 14px;
    font-size: 12px;
    border-color: rgba(109, 147, 162, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(235, 246, 250, 0.03) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.workspace-legal-footer .site-legal-footer-links a:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 18px rgba(4, 13, 18, 0.14);
}

.layout.layout-sidebar-hidden:not(.layout-home-view) .workspace-legal-footer {
    width: min(1260px, calc(100vw - 48px));
    max-width: 1260px;
}

@media (max-width: 880px) {
    .site-legal-footer {
        padding: 12px 14px;
    }

    .site-legal-footer-links {
        justify-content: center;
    }

    .workspace-legal-footer {
        width: min(100%, calc(100vw - 28px));
        padding: 10px 12px;
    }
}

@keyframes home-node-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes home-node-float-centered {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-6px); }
}

@keyframes home-node-pulse {
    0% { transform: scale(0.84); opacity: 0.42; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.84); opacity: 0.42; }
}

@keyframes home-link-scan {
    0% { transform: translateX(-100%); opacity: 0; }
    20%, 80% { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

@keyframes home-ad-glow {
    0%, 100% { filter: saturate(1) brightness(1); }
    50% { filter: saturate(1.08) brightness(1.04); }
}

@keyframes home-arrow-scan {
    0% { transform: translateX(-100%); opacity: 0; }
    25%, 75% { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

.app-topbar-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
    flex-wrap: nowrap;
}

.home-topnav,
.home-topbar-actions {
    display: none;
}

.home-topnav {
    align-items: center;
    justify-content: center;
    gap: 28px;
    grid-column: 2;
    grid-row: 1;
}

.home-topnav-link {
    border: 0;
    background: transparent;
    color: rgba(228, 241, 247, 0.76);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.035em;
    cursor: pointer;
    transition: color 140ms ease, transform 140ms ease;
}

.home-topnav-link:hover {
    color: #ffffff;
    transform: translateY(-1px);
}

.home-topbar-actions {
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.home-login-btn {
    min-width: 116px;
    min-height: 40px;
    border-radius: 999px;
    padding: 0 18px;
    border-color: rgba(150, 185, 198, 0.28);
    background: rgba(255, 255, 255, 0.04);
    color: #eff8fb;
}

.layout.layout-home-view .app-topnav,
.layout.layout-home-view .app-topbar-controls {
    display: none;
}

.layout.layout-home-view .home-topnav {
    display: none;
}

.layout.layout-home-view .home-topbar-actions {
    display: flex;
}

.layout.layout-home-view.layout-home-authenticated .app-topnav {
    display: flex;
}

.layout.layout-home-view.layout-home-authenticated .app-topbar-controls {
    display: flex;
}

.layout.layout-home-view.layout-home-authenticated .home-topbar-actions {
    display: none;
}

#homeView {
    width: min(1360px, 100%);
    max-width: 1360px;
    padding: 26px;
    border-radius: 30px;
}

.layout.layout-sidebar-hidden #homeView {
    width: min(1360px, calc(100vw - 36px));
    max-width: 1360px;
}

.layout.layout-home-view .app-topbar {
    width: min(1360px, calc(100vw - 36px));
    max-width: 1360px;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    padding-left: 26px;
    padding-right: 26px;
    grid-template-columns: minmax(180px, 1fr) auto;
}

.layout.layout-sidebar-hidden:not(.layout-home-view):not(.layout-builder-mode) .app-topbar {
    width: min(1260px, calc(100vw - 36px));
    max-width: 1260px;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
}

.layout.layout-home-view .app-topbar-right {
    grid-column: 2;
    justify-self: end;
}

.layout.layout-home-view.layout-home-authenticated .app-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.layout.layout-home-view.layout-home-authenticated .app-topbar-right {
    grid-column: 3;
    min-width: 0;
    gap: 10px;
}

.layout.layout-home-view.layout-home-authenticated .app-topnav {
    flex-wrap: nowrap;
    gap: 18px;
    min-width: 0;
}

.layout.layout-home-view.layout-home-authenticated .app-topbar-controls {
    min-width: 0;
    gap: 10px;
}

.layout.layout-home-view.layout-home-authenticated .topbar-user-wrap {
    min-width: 0;
}

.layout.layout-home-view.layout-home-authenticated .topbar-account-btn {
    width: min(100%, 280px);
    min-width: 0;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layout.layout-home-view.layout-home-authenticated .topbar-pill {
    flex-shrink: 0;
}

.home-shell {
    gap: 30px;
}

.home-newsletter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
    gap: 22px;
    align-items: center;
    padding: 22px 26px;
    border-radius: 24px;
    border: 1px solid rgba(88, 121, 135, 0.2);
    background: linear-gradient(180deg, rgba(8, 18, 24, 0.88) 0%, rgba(10, 21, 28, 0.86) 100%);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

.home-newsletter-copy {
    display: grid;
    gap: 8px;
    max-width: 560px;
}

.home-newsletter-copy strong {
    color: #f3fbff;
    font-size: 22px;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.home-newsletter-copy p {
    margin: 0;
    color: rgba(205, 225, 234, 0.76);
    font-size: 14px;
    line-height: 1.65;
}

.home-newsletter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    position: relative;
}

.home-newsletter-form input {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(119, 156, 170, 0.24);
    background: rgba(244, 251, 253, 0.04);
    color: #f4fdff;
    caret-color: #16303a;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    opacity: 1;
    -webkit-text-fill-color: currentColor;
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.home-newsletter-form input::placeholder {
    color: rgba(198, 220, 229, 0.52);
}

.home-newsletter-form input:focus {
    border-color: rgba(59, 209, 176, 0.62);
    box-shadow: 0 0 0 3px rgba(59, 209, 176, 0.12);
    background: rgba(244, 251, 253, 0.06);
}

.home-newsletter-form input:-webkit-autofill,
.home-newsletter-form input:-webkit-autofill:hover,
.home-newsletter-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #16303a;
    box-shadow: 0 0 0 1000px rgba(240, 247, 248, 0.96) inset;
    transition: background-color 9999s ease-in-out 0s;
}

.home-newsletter-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.home-newsletter-btn {
    min-width: 132px;
    min-height: 48px;
    border-radius: 14px;
    font-weight: 800;
}

.home-newsletter-form.is-loading .home-newsletter-btn,
.home-newsletter-btn:disabled {
    opacity: 0.72;
    cursor: wait;
}

.home-newsletter-meta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.home-newsletter-legal {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(204, 223, 219, 0.78);
}

.home-newsletter-legal a {
    color: #71dfbe;
    font-weight: 700;
    text-decoration: none;
}

.home-newsletter-legal a:hover {
    color: #8bf0d0;
    text-decoration: underline;
}

.home-newsletter-status {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(171, 198, 206, 0.72);
    background: rgba(244, 249, 250, 0.96);
    color: rgba(26, 57, 68, 0.88);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    box-shadow: 0 8px 18px rgba(18, 41, 49, 0.08);
}

.home-newsletter-status.is-empty {
    display: none;
}

.home-newsletter-status.is-success {
    border-color: rgba(72, 194, 156, 0.34);
    background: rgba(232, 251, 245, 0.98);
    color: #13755f;
}

.home-newsletter-status.is-pending {
    border-color: rgba(72, 126, 196, 0.24);
    background: rgba(239, 246, 255, 0.98);
    color: #2f5f92;
}

.home-newsletter-status.is-error {
    border-color: rgba(213, 109, 90, 0.28);
    background: rgba(255, 242, 239, 0.98);
    color: #aa4d43;
}

.home-hero-card {
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 338px);
    gap: 22px;
    padding: 34px 36px;
    align-items: center;
}

.home-hero-copy {
    max-width: 700px;
    display: grid;
    align-content: center;
    min-height: 100%;
}

.home-hero-copy h1 {
    max-width: 560px;
    margin: 16px 0 14px;
    font-size: clamp(32px, 3.3vw, 42px);
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.home-hero-copy p,
.home-transform-copy p,
.home-story-card p {
    max-width: none;
    font-size: 15px;
    line-height: 1.74;
}

.home-hero-copy p + p {
    margin-top: 12px;
}

.home-benefit-grid {
    margin-top: 26px;
    gap: 12px;
}

.home-hero-side {
    display: grid;
    gap: 10px;
    align-content: center;
}

.home-hero-side-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-hero-side-card,
.home-process-item {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(93, 129, 142, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.home-hero-side-card strong,
.home-process-item strong {
    color: #f2fbff;
    font-size: 17px;
    line-height: 1.2;
}

.home-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #254855;
    background: rgba(26, 55, 66, 0.06);
    border: 1px solid rgba(102, 135, 147, 0.16);
}

.home-card-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.home-hero-side-card span,
.home-process-item span {
    color: rgba(201, 220, 229, 0.72);
    font-size: 12px;
    line-height: 1.58;
}

.home-story-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: none;
    gap: 18px;
}

.home-story-card-overview,
.home-story-card-speed,
.home-story-card-testing {
    grid-area: auto;
    padding: 26px;
}

.home-story-card h2,
.home-story-card h3 {
    font-size: 24px;
    max-width: 240px;
}

.home-transform-card {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
    gap: 24px;
    padding: 30px 32px;
}

.home-transform-copy {
    max-width: 620px;
}

.home-transform-copy h2 {
    font-size: 32px;
    line-height: 1.05;
}

.home-process-panel {
    display: grid;
    gap: 12px;
}

#homeView {
    border: 0;
    background: transparent;
    box-shadow: none;
}

#homeView::before {
    content: none;
}

#homeView::after {
    content: none;
}

.home-newsletter-bar,
.home-hero-card,
.home-story-card,
.home-transform-card {
    border: 1px solid rgba(86, 132, 124, 0.34);
    background: linear-gradient(180deg, rgba(17, 35, 39, 0.94) 0%, rgba(16, 31, 35, 0.92) 52%, rgba(18, 40, 40, 0.92) 100%);
    box-shadow: 0 16px 34px rgba(8, 21, 25, 0.22);
    backdrop-filter: blur(10px);
}

.home-newsletter-bar::after,
.home-hero-card::after,
.home-story-card::after,
.home-transform-card::after,
.home-hero-side-card::after,
.home-process-item::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(78, 214, 179, 0.22) 0%, rgba(78, 214, 179, 0.08) 42%, transparent 72%);
    pointer-events: none;
    animation: home-card-glow 6.8s ease-in-out infinite;
}

.home-newsletter-bar,
.home-hero-card,
.home-story-card,
.home-transform-card,
.home-hero-side-card,
.home-process-item {
    position: relative;
    overflow: hidden;
}

.home-newsletter-copy strong,
.home-kicker,
.home-section-kicker,
.home-hero-copy h1,
.home-story-card h2,
.home-story-card h3,
.home-transform-copy h2,
.home-hero-side-card strong,
.home-process-item strong {
    color: #effaf8;
}

.home-kicker,
.home-section-kicker {
    color: #67d7b6;
}

.home-kicker::before,
.home-section-kicker::before {
    background: rgba(103, 215, 182, 0.5);
}

.home-newsletter-copy p,
.home-hero-copy p,
.home-transform-copy p,
.home-story-card p,
.home-hero-side-card span,
.home-process-item span {
    color: rgba(210, 228, 224, 0.82);
}

.home-newsletter-form input {
    border-color: rgba(112, 154, 168, 0.38);
    background: rgba(240, 247, 248, 0.96);
    color: #16303a;
    caret-color: #16303a;
    -webkit-text-fill-color: #16303a;
}

.home-newsletter-form input::placeholder {
    color: rgba(86, 111, 120, 0.72);
}

.home-hero-side-card,
.home-process-item {
    border-color: rgba(82, 125, 118, 0.28);
    background: linear-gradient(180deg, rgba(24, 45, 49, 0.94) 0%, rgba(20, 37, 40, 0.92) 100%);
    box-shadow: 0 12px 24px rgba(6, 17, 21, 0.22);
}

.home-story-card h2,
.home-story-card h3 {
    max-width: 240px;
    font-size: 22px;
    line-height: 1.1;
}

.home-transform-copy h2 {
    font-size: 28px;
    line-height: 1.08;
}

.home-transform-card {
    gap: 20px;
}

.home-flow-card {
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
    align-items: stretch;
    min-height: 420px;
}

.home-flow-copy {
    max-width: 640px;
    align-self: center;
}

.home-flow-visual {
    position: relative;
    min-height: 360px;
    border-radius: 26px;
    border: 1px solid rgba(192, 213, 218, 0.82);
    background:
        linear-gradient(180deg, rgba(15, 28, 35, 0.96) 0%, rgba(11, 22, 28, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 42px rgba(6, 15, 20, 0.18);
    overflow: hidden;
}

.home-flow-grid {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(114, 147, 158, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(114, 147, 158, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 18% 24%, rgba(64, 208, 166, 0.14) 0%, transparent 18%),
        radial-gradient(circle at 82% 74%, rgba(93, 224, 185, 0.12) 0%, transparent 20%);
    background-size: 24px 24px, 24px 24px, auto, auto;
    opacity: 0.98;
}

.home-flow-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 38%, rgba(64, 208, 166, 0.08) 100%);
}

.home-flow-wire-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.home-flow-wire {
    pointer-events: none;
}

.home-flow-node {
    position: absolute;
    z-index: 2;
    width: 112px;
    animation: home-node-float 7.2s ease-in-out infinite;
}

.home-flow-node-cutting {
    left: 42px;
    top: 18px;
}

.home-flow-node-subtitles {
    right: 42px;
    bottom: 18px;
    animation-delay: 1.2s;
}

.home-flow-visual .builder-node {
    user-select: none;
    pointer-events: none;
}

.home-flow-visual .builder-connections {
    pointer-events: none;
}

.home-flow-visual .builder-node-header {
    cursor: default;
    padding: 5px 6px;
}

.home-flow-visual .builder-node-tools {
    gap: 0;
}

.home-flow-node-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 15px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid rgba(90, 163, 194, 0.34);
    background: rgba(77, 134, 160, 0.16);
    color: #bfe7fb;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
}

.home-flow-visual .builder-node-body {
    gap: 4px;
    padding: 4px 6px 6px;
}

.home-flow-visual .builder-node-title {
    font-size: 8px;
}

.home-flow-visual .builder-node-ports {
    gap: 4px;
}

.home-flow-visual .builder-port-row {
    min-height: 13px;
}

.home-flow-visual .builder-port-label,
.home-flow-visual .builder-setting-row label,
.home-flow-visual .builder-setting-hint {
    font-size: 7px;
}

.home-flow-visual .builder-settings {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.home-flow-node-action {
    width: 100%;
    min-height: 20px;
    border-radius: 6px;
    border: 1px solid rgba(176, 205, 214, 0.28);
    background: rgba(244, 250, 253, 0.08);
    color: #e7f3f8;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.home-flow-visual .builder-setting-row textarea {
    min-height: 36px;
    font-size: 8px;
}

.home-flow-visual .builder-setting-row button,
.home-flow-visual .builder-setting-row textarea {
    pointer-events: none;
}

.home-process-panel {
    gap: 14px;
    align-content: start;
}

.home-shell > * {
    --home-reveal-delay: 0ms;
}

.home-newsletter-bar,
.home-hero-card,
.home-story-card,
.home-transform-card,
.home-hero-side-card,
.home-process-item {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    transition:
        opacity 520ms ease,
        transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 220ms ease,
        border-color 220ms ease;
    transition-delay: var(--home-reveal-delay, 0ms);
}

.home-newsletter-bar.is-visible,
.home-hero-card.is-visible,
.home-story-card.is-visible,
.home-transform-card.is-visible,
.home-hero-side-card.is-visible,
.home-process-item.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.home-hero-side-card:hover,
.home-process-item:hover,
.home-story-card:hover {
    border-color: rgba(86, 182, 151, 0.42);
    box-shadow: 0 16px 30px rgba(35, 75, 82, 0.1);
    transform: translateY(-2px);
}

@keyframes home-card-glow {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(0.94);
        opacity: 0.48;
    }
    50% {
        transform: translate3d(-8px, 6px, 0) scale(1.04);
        opacity: 0.92;
    }
}

.panel-header {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
    margin-bottom: 12px;
    animation: reveal 220ms ease-out;
}

.panel-header h1 {
    margin: 0;
    font-size: 19px;
    letter-spacing: 0.01em;
}

.panel-header p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.app-topbar {
    position: relative;
    z-index: 5;
    grid-column: 1 / -1;
    grid-row: 1;
    background: linear-gradient(180deg, rgba(4, 14, 19, 0.98) 0%, rgba(7, 21, 28, 0.96) 100%);
    border: 1px solid rgba(69, 102, 118, 0.28);
    border-radius: 18px;
    padding: 12px 18px;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    box-shadow: 0 22px 50px rgba(4, 17, 22, 0.2);
}

.app-topbar-left {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-self: start;
    grid-column: 1;
    grid-row: 1;
}

.app-topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
    justify-self: end;
    grid-column: 3;
    grid-row: 1;
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
    color: #f5fbff;
}

.app-brand:hover {
    color: #ffffff;
}

.app-brand-mark {
    display: block;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(6, 16, 22, 0.22));
}

.app-brand-copy {
    display: flex;
    align-items: center;
    min-height: 34px;
    min-width: 0;
}

.app-brand-copy strong {
    display: block;
    font-size: 17px;
    font-family: "Bahnschrift SemiCondensed", "Bahnschrift", "Aptos Display", "Segoe UI Variable Display", sans-serif;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: translateY(1px);
    white-space: nowrap;
}

.topbar-account-btn {
    min-height: 38px;
    width: min(100%, 320px);
    min-width: 0;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(159, 188, 202, 0.3);
    box-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-topnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 24px);
    flex-wrap: wrap;
    min-width: 0;
    justify-self: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    grid-column: 2;
    grid-row: 1;
}

.topbar-subnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    margin-top: -4px;
}

.topbar-subnav-btn {
    border: 1px solid rgba(159, 188, 202, 0.24);
    border-radius: 999px;
    min-height: 34px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(228, 241, 247, 0.78);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.topbar-subnav-btn:hover,
.topbar-subnav-btn.is-active {
    color: #ffffff;
    border-color: rgba(45, 201, 163, 0.42);
    background: rgba(14, 159, 136, 0.16);
    transform: translateY(-1px);
}

.workspace-motd-banner {
    position: fixed;
    top: var(--workspace-motd-top, 92px);
    left: 50%;
    transform: translateX(-50%);
    width: min(320px, calc(100vw - 24px));
    z-index: 24;
    pointer-events: none;
}

.workspace-motd-banner-card {
    pointer-events: auto;
    position: relative;
    display: block;
    padding: 12px 46px 11px 13px;
    border-radius: 20px;
    border: 1px solid transparent;
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 34px rgba(4, 17, 22, 0.2);
    animation: workspace-motd-float-in 180ms ease-out;
}

.workspace-motd-banner-card.is-critical {
    background:
        radial-gradient(circle at top right, rgba(255, 214, 205, 0.18) 0%, transparent 34%),
        linear-gradient(135deg, rgba(103, 25, 22, 0.94) 0%, rgba(154, 45, 39, 0.93) 100%);
    border-color: rgba(255, 207, 199, 0.2);
    color: #fff5f3;
}

.workspace-motd-banner-card.is-warning {
    background:
        radial-gradient(circle at top right, rgba(255, 244, 203, 0.28) 0%, transparent 38%),
        linear-gradient(135deg, rgba(255, 247, 221, 0.96) 0%, rgba(244, 224, 163, 0.94) 100%);
    border-color: rgba(207, 164, 55, 0.26);
    color: #4f3b03;
}

.workspace-motd-banner-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.workspace-motd-banner-copy strong {
    font-size: 14px;
    line-height: 1.2;
}

.workspace-motd-banner-body,
.dashboard-motd-item-body {
    display: grid;
    gap: 6px;
}

.workspace-motd-banner-body p,
.dashboard-motd-item-body p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
}

.workspace-motd-banner-meta,
.dashboard-motd-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
}

.workspace-motd-banner-card.is-critical .workspace-motd-banner-meta {
    color: rgba(255, 238, 235, 0.82);
}

.workspace-motd-banner-card.is-warning .workspace-motd-banner-meta {
    color: rgba(77, 57, 0, 0.72);
}

.workspace-motd-banner .workspace-motd-banner-body p {
    font-size: 11px;
    line-height: 1.4;
}

.workspace-motd-banner .workspace-motd-banner-meta {
    gap: 5px;
    font-size: 9px;
    letter-spacing: 0.01em;
}

.workspace-motd-banner .motd-tone-chip {
    min-height: 22px;
    padding: 3px 9px;
    font-size: 10px;
}

.motd-tone-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.motd-tone-chip.is-critical {
    background: rgba(203, 91, 79, 0.14);
    border-color: rgba(203, 91, 79, 0.26);
    color: #a2483f;
}

.motd-tone-chip.is-warning {
    background: rgba(224, 173, 38, 0.16);
    border-color: rgba(224, 173, 38, 0.3);
    color: #8a6500;
}

.workspace-motd-banner-card.is-critical .motd-tone-chip {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff6f5;
}

.workspace-motd-banner-card.is-warning .motd-tone-chip {
    background: rgba(255, 247, 224, 0.84);
}

.motd-dismiss-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(13, 29, 38, 0.12);
    color: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.motd-dismiss-btn:hover {
    transform: translateY(-1px);
    background: rgba(13, 29, 38, 0.18);
    box-shadow: 0 10px 18px rgba(4, 17, 22, 0.12);
}

.workspace-motd-banner-card.is-critical .motd-dismiss-btn {
    background: rgba(255, 255, 255, 0.12);
}

.workspace-motd-banner-card.is-critical .motd-dismiss-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.workspace-motd-banner .motd-dismiss-btn {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 28px;
    height: 28px;
    font-size: 18px;
}

.motd-dismiss-btn-inline {
    width: 34px;
    height: 34px;
    font-size: 22px;
}

@keyframes workspace-motd-float-in {
    0% {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.topnav-btn {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    min-height: auto;
    padding: 6px 0 8px;
    background: transparent;
    color: rgba(228, 241, 247, 0.76);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.035em;
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.topnav-btn:hover,
.topnav-btn.active {
    color: #ffffff;
    border-color: rgba(45, 201, 163, 0.85);
    transform: translateY(-1px);
}

.topbar-pill {
    border-radius: 999px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(110, 88, 182, 0.24) 0%, rgba(146, 112, 214, 0.18) 100%);
    border: 1px solid rgba(190, 164, 255, 0.32);
    color: #f3edff;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 10px 22px rgba(41, 27, 86, 0.14);
}

.topbar-pill::before {
    content: "∞";
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 800;
    color: #79f5d4;
    text-shadow: 0 0 14px rgba(121, 245, 212, 0.3);
}

.topbar-pill::before {
    content: none;
}

.topbar-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(240, 248, 251, 0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.topbar-icon-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.topbar-icon-btn:hover,
.topbar-icon-btn.active {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.topbar-user-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.topbar-user-wrap .account-menu {
    left: auto;
    right: 0;
}

.app-topbar.is-compact {
    gap: 12px;
    padding-left: 14px;
    padding-right: 14px;
}

.app-topbar.is-compact .topbar-pill {
    display: none;
}

.app-topbar.is-compact .app-topnav {
    gap: 14px;
}

.app-topbar.is-compact .topbar-account-btn {
    max-width: 240px;
}

.app-topbar.is-tight {
    gap: 10px;
    padding: 10px 12px;
}

.app-topbar.is-tight .app-brand {
    gap: 10px;
}

.app-topbar.is-tight .app-brand-mark {
    width: 30px;
    height: 30px;
}

.app-topbar.is-tight .app-brand-copy strong {
    font-size: 15px;
    letter-spacing: 0.08em;
}

.app-topbar.is-tight .app-topnav {
    gap: 12px;
}

.app-topbar.is-tight .topnav-btn {
    font-size: 11px;
    letter-spacing: 0.02em;
}

.app-topbar.is-tight .topbar-account-btn {
    max-width: 190px;
}

.project-list {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(138, 168, 180, 0.58) transparent;
    border-radius: 12px;
    padding: 4px 2px 4px 4px;
    background: rgba(255, 255, 255, 0.035);
}

.project-list::-webkit-scrollbar {
    width: 8px;
}

.project-list::-webkit-scrollbar-track {
    background: transparent;
}

.project-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(138, 168, 180, 0.54);
}

.project-list::-webkit-scrollbar-thumb:hover {
    background: rgba(170, 198, 209, 0.72);
}

.sidebar-bottom-actions {
    display: grid;
    gap: 8px;
}

.brand-btn {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(106, 167, 231, 0.75);
    background: linear-gradient(180deg, #3583ce 0%, #2867a3 100%);
    color: #f0f8ff;
    padding: 10px 12px;
    cursor: pointer;
}

.brand-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(45, 113, 182, 0.35);
}

.timeline-btn {
    border-color: rgba(14, 159, 136, 0.75);
    background: linear-gradient(180deg, #0ea58e 0%, #0b7f6c 100%);
}

.timeline-btn:hover {
    box-shadow: 0 8px 16px rgba(11, 127, 108, 0.34);
}

.project-item {
    appearance: none;
    width: 100%;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 8px 10px;
    cursor: pointer;
    margin-bottom: 0;
    color: #c4d2da;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    font-family: inherit;
    transition: all 160ms ease;
}

.project-item .item-title {
    display: block;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-item .item-sub {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    opacity: 0.82;
}

.project-item.status-running .item-sub {
    color: #a9f0e0;
    opacity: 1;
}

.project-item .item-progress {
    display: block;
    margin-top: 8px;
    height: 4px;
    width: 100%;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(197, 223, 233, 0.12);
}

.project-item .item-progress-fill {
    position: relative;
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(84, 232, 197, 0.78) 0%, rgba(14, 159, 136, 0.98) 100%);
    box-shadow: 0 0 10px rgba(14, 159, 136, 0.28);
    transition: width 220ms ease;
}

.project-item .item-progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.32) 45%, transparent 100%);
    transform: translateX(-100%);
    animation: project-progress-sheen 1.4s linear infinite;
}

.project-item:hover {
    border-color: rgba(14, 159, 136, 0.6);
    background: rgba(14, 159, 136, 0.08);
    color: #f1f9fa;
    transform: translateY(-1px);
}

.project-item.active {
    border-color: rgba(14, 159, 136, 0.9);
    background: rgba(14, 159, 136, 0.18);
    color: #f5fffd;
}

.project-item:focus-visible {
    outline: 0;
    border-color: rgba(14, 159, 136, 0.8);
}

.project-item-row {
    display: block;
    margin-bottom: 6px;
}

.project-item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.project-item-badge {
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.08);
    color: #dce9ef;
}

.project-item-badge.is-alert {
    background: rgba(14, 159, 136, 0.18);
    color: #bffaea;
}

.welcome-kicker {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0d7a6a;
}

.welcome-inline-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.welcome-stat-card span,
.settings-summary-card span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.welcome-stat-card strong,
.settings-summary-card strong {
    font-size: 18px;
    line-height: 1;
}

.welcome-stats-grid,
.settings-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.welcome-stat-card,
.settings-summary-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 14px;
    padding: 13px 14px;
    box-shadow: var(--shadow-sm);
    display: grid;
    gap: 5px;
}

.welcome-stat-card small,
.settings-summary-card small {
    color: var(--text-muted);
}

.dashboard-stats-grid .welcome-stat-card {
    min-height: 104px;
    align-content: start;
    background:
        radial-gradient(circle at top left, rgba(77, 203, 181, 0.12) 0%, transparent 34%),
        linear-gradient(180deg, rgba(12, 24, 31, 0.94) 0%, rgba(8, 17, 23, 0.88) 100%);
    border-color: rgba(101, 131, 145, 0.22);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
}

.dashboard-stats-grid .welcome-stat-card span {
    color: rgba(194, 217, 227, 0.72);
}

.dashboard-stats-grid .welcome-stat-card strong {
    font-size: 28px;
    letter-spacing: -0.03em;
    color: #f4fdff;
}

.dashboard-stats-grid .welcome-stat-card small {
    color: rgba(193, 215, 224, 0.68);
}

.welcome-stat-card-credits {
    background:
        radial-gradient(circle at top left, rgba(106, 255, 220, 0.17) 0%, transparent 34%),
        linear-gradient(180deg, rgba(14, 31, 34, 0.96) 0%, rgba(10, 21, 25, 0.9) 100%) !important;
}

.dashboard-credit-value {
    display: flex;
    align-items: center;
    gap: 11px;
}

.dashboard-credit-icon {
    width: 24px;
    height: 24px;
    position: relative;
    flex: 0 0 auto;
    clip-path: polygon(50% 0%, 90% 22%, 90% 78%, 50% 100%, 10% 78%, 10% 22%);
    background:
        linear-gradient(145deg, #9dfff0 0%, #45dec2 34%, #149680 72%, #0a6355 100%);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.45), 0 10px 18px rgba(14, 159, 136, 0.24);
}

.dashboard-credit-icon::before {
    content: "";
    position: absolute;
    inset: 4px;
    clip-path: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, transparent 80%);
    opacity: 0.7;
}

.dashboard-credit-icon::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    right: 3px;
    top: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}

.dashboard-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
    gap: 12px;
    align-items: start;
}

.dashboard-column {
    display: grid;
    gap: 12px;
    align-content: start;
}

.dashboard-start-card {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    min-height: 0;
    padding: 18px 20px;
    background:
        radial-gradient(circle at top right, rgba(19, 178, 151, 0.12) 0%, transparent 30%),
        linear-gradient(180deg, rgba(249, 252, 253, 0.98) 0%, rgba(240, 247, 249, 0.94) 100%);
    border-color: rgba(188, 208, 218, 0.34);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.18);
}

.dashboard-start-copy {
    min-width: 0;
}

.dashboard-start-copy h2 {
    margin: 0 0 7px;
    font-size: 24px;
    line-height: 1.06;
    color: #203440;
}

.dashboard-start-copy p {
    margin: 0 0 9px;
    max-width: 560px;
    font-size: 13px;
    color: var(--text-muted);
}

.dashboard-start-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.dashboard-feedback-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 0;
    padding: 18px 20px;
    background:
        radial-gradient(circle at top right, rgba(255, 230, 122, 0.28) 0%, transparent 34%),
        linear-gradient(180deg, rgba(255, 251, 235, 0.98) 0%, rgba(255, 245, 208, 0.96) 100%);
    border-color: rgba(210, 182, 82, 0.34);
    box-shadow: 0 16px 30px rgba(93, 71, 12, 0.14);
}

.dashboard-feedback-copy {
    min-width: 0;
}

.dashboard-feedback-copy h3 {
    margin: 0 0 7px;
    font-size: 21px;
    line-height: 1.12;
    color: #3f2f00;
}

.dashboard-feedback-copy p {
    margin: 0;
    max-width: 620px;
    font-size: 13px;
    line-height: 1.5;
    color: #6d5917;
}

.dashboard-feedback-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.dashboard-feedback-btn {
    min-width: 210px;
    min-height: 42px;
    font-weight: 800;
}

.dashboard-cta-btn {
    min-width: 200px;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
    box-shadow: 0 6px 14px rgba(14, 159, 136, 0.25);
}

.dashboard-cta-btn::before {
    content: none;
}

.dashboard-news-card {
    margin-bottom: 0;
}

.dashboard-pipelines-panel {
    margin-bottom: 0;
    background:
        linear-gradient(180deg, rgba(248, 252, 253, 0.98) 0%, rgba(239, 247, 249, 0.94) 100%);
    border-color: rgba(182, 202, 214, 0.32);
    box-shadow: 0 20px 34px rgba(0, 0, 0, 0.18);
}

.dashboard-tutorial-card {
    margin-bottom: 0;
}

.dashboard-info-card {
    min-height: 0;
    background:
        linear-gradient(180deg, rgba(248, 252, 253, 0.97) 0%, rgba(239, 247, 249, 0.93) 100%);
    border-color: rgba(182, 202, 214, 0.32);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.16);
}

.dashboard-info-list {
    display: grid;
    gap: 0;
}

.dashboard-info-item {
    padding: 10px 0;
    border-top: 1px solid rgba(141, 170, 183, 0.16);
}

.dashboard-info-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.dashboard-info-item:last-child {
    padding-bottom: 0;
}

.dashboard-info-item strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    color: #203440;
}

.dashboard-info-item p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.welcome-grid,
.settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 12px;
    margin-bottom: 12px;
    align-items: start;
}

.welcome-grid-bottom {
    margin-bottom: 0;
}

.welcome-card {
    min-height: 0;
}

.welcome-card-head,
.settings-hero-card {
    margin-bottom: 10px;
}

.welcome-card-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.welcome-card-head h3,
.settings-hero-card h2 {
    margin: 0;
    font-size: 15px;
}

.settings-password-card {
    margin-bottom: 0;
}

.welcome-card-head p {
    margin: 4px 0 0;
    font-size: 13px;
}

.dashboard-motd-panel {
    margin-bottom: 12px;
    border-color: rgba(182, 202, 214, 0.34);
    background:
        linear-gradient(180deg, rgba(248, 252, 253, 0.98) 0%, rgba(240, 247, 249, 0.95) 100%);
    box-shadow: 0 18px 32px rgba(10, 30, 40, 0.11);
}

.dashboard-motd-list {
    display: grid;
    gap: 10px;
}

.dashboard-motd-item {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(131, 164, 178, 0.22);
    background: rgba(255, 255, 255, 0.82);
}

.dashboard-motd-item.is-critical {
    background:
        radial-gradient(circle at top right, rgba(255, 181, 168, 0.18) 0%, transparent 30%),
        linear-gradient(180deg, rgba(255, 246, 244, 0.98) 0%, rgba(255, 236, 232, 0.95) 100%);
    border-color: rgba(219, 109, 96, 0.32);
}

.dashboard-motd-item.is-warning {
    background:
        radial-gradient(circle at top right, rgba(255, 230, 143, 0.18) 0%, transparent 30%),
        linear-gradient(180deg, rgba(255, 250, 234, 0.98) 0%, rgba(253, 243, 210, 0.95) 100%);
    border-color: rgba(224, 173, 38, 0.3);
}

.dashboard-motd-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.dashboard-motd-item-title {
    display: grid;
    gap: 6px;
}

.dashboard-motd-item-title strong {
    font-size: 15px;
    line-height: 1.2;
}

.dashboard-motd-item.is-critical .dashboard-motd-item-body p {
    color: #5a2a25;
}

.dashboard-motd-item.is-warning .dashboard-motd-item-body p {
    color: #5a4300;
}

.welcome-pipeline-list,
.welcome-download-list,
.welcome-favorites-grid,
.welcome-runs-list,
.settings-access-list {
    display: grid;
    gap: 10px;
}

.welcome-favorites-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.pipeline-overview-card,
.pending-download-card,
.favorite-pipeline-card,
.recent-run-card,
.settings-access-card {
    border: 1px solid rgba(146, 176, 190, 0.26);
    border-radius: 14px;
    padding: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 252, 0.92) 100%);
}

.pipeline-overview-card {
    display: grid;
    gap: 10px;
}

.pipeline-overview-card.is-completed {
    border-color: rgba(16, 160, 120, 0.28);
    background:
        radial-gradient(circle at top right, rgba(24, 191, 141, 0.09) 0%, transparent 28%),
        linear-gradient(180deg, rgba(248, 255, 251, 0.99) 0%, rgba(240, 250, 245, 0.94) 100%);
}

.pipeline-overview-card.is-running {
    border-color: rgba(96, 135, 155, 0.28);
    background:
        radial-gradient(circle at top right, rgba(88, 163, 205, 0.1) 0%, transparent 28%),
        linear-gradient(180deg, rgba(249, 252, 254, 0.99) 0%, rgba(239, 246, 250, 0.94) 100%);
}

.welcome-pipelines-card {
    margin-bottom: 0;
}

.pipeline-overview-head,
.pending-download-head,
.recent-run-head,
.favorite-pipeline-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.pipeline-overview-head strong,
.pending-download-head strong,
.recent-run-head strong,
.favorite-pipeline-head strong {
    display: block;
    font-size: 16px;
    line-height: 1.2;
}

.pipeline-overview-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pipeline-overview-copy,
.favorite-pipeline-card p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.pipeline-overview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 0;
    color: #4e6978;
    font-size: 11px;
}

.pipeline-overview-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(131, 164, 178, 0.2);
    background: rgba(8, 34, 46, 0.035);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 8px;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.status-pill.is-running {
    background: rgba(14, 159, 136, 0.14);
    color: #0f7c6b;
}

.status-pill.is-completed {
    background: rgba(14, 159, 136, 0.14);
    color: #0f7c6b;
}

.status-pill.is-failed,
.status-pill.is-cancelled {
    background: rgba(203, 91, 79, 0.12);
    color: #a2483f;
}

.status-pill.is-idle {
    background: rgba(18, 32, 42, 0.08);
    color: #395566;
}

.dashboard-action-btn {
    min-width: 122px;
    min-height: 36px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: none;
}

.dashboard-action-btn-secondary {
    background: #f3f8fa;
    border-color: var(--border);
    color: #244453;
}

.dashboard-action-btn-secondary:hover {
    border-color: #b4cdd9;
    background: #f3f8fa;
}

.dashboard-run-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-progress-track {
    flex: 1;
    height: 10px;
    background: rgba(116, 151, 168, 0.18);
}

.dashboard-progress-fill {
    background: linear-gradient(90deg, #18c6a7 0%, #24a7d4 100%);
}

.dashboard-progress-label {
    min-width: 48px;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    color: #35606d;
}

.pipeline-overview-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: flex-start;
}

.pipeline-overview-thumb {
    position: relative;
    display: block;
    width: 72px;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 14px;
    background: #102126;
    box-shadow: 0 10px 18px rgba(5, 16, 23, 0.14);
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.pipeline-overview-thumb::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(180deg, transparent 0%, rgba(7, 21, 28, 0.5) 100%);
    pointer-events: none;
}

.dashboard-output-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: saturate(1.04) contrast(1.03);
}

.pipeline-overview-thumb:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(5, 16, 23, 0.2);
}

@media (max-width: 1180px) {
    #homeView,
    #dashboardView,
    .layout.layout-sidebar-hidden #dashboardView {
        width: min(1160px, calc(100vw - 28px));
    }

    .layout.layout-sidebar-hidden #homeView {
        width: min(1160px, calc(100vw - 28px));
    }

    .layout.layout-home-view .app-topbar {
        width: min(1160px, calc(100vw - 28px));
        max-width: 1160px;
    }

    .home-newsletter-bar,
    .home-hero-card,
    .home-transform-card {
        grid-template-columns: 1fr;
    }

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

    .home-story-card-overview {
        grid-column: 1 / -1;
    }

    .home-flow-copy {
        max-width: none;
    }

    .home-flow-visual {
        min-height: 340px;
    }

    .home-node-scene {
        justify-content: flex-start;
    }

    .home-node-stage {
        width: min(100%, 540px);
        margin-left: 0;
    }

    .home-ad-lab {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .home-ad-arrows {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: min(280px, 100%);
    }

    .home-ad-target-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-ad-target-card,
    .home-ad-source-card {
        width: auto;
    }

    .dashboard-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    #homeView,
    #dashboardView,
    .layout.layout-sidebar-hidden #dashboardView {
        width: min(100%, calc(100vw - 18px));
    }

    .layout.layout-sidebar-hidden #homeView {
        width: min(100%, calc(100vw - 18px));
    }

    .layout.layout-home-view .app-topbar {
        width: min(100%, calc(100vw - 18px));
        max-width: none;
    }

    .home-newsletter-bar,
    .home-hero-card,
    .home-transform-card,
    .home-story-card {
        padding: 22px;
    }

    .home-newsletter-form,
    .home-benefit-grid,
    .home-story-grid {
        grid-template-columns: 1fr;
    }

    .home-flow-visual {
        min-height: 420px;
    }

    .home-flow-node {
        width: min(calc(100% - 44px), 120px);
        animation-name: home-node-float-centered;
    }

    .home-flow-node-cutting {
        left: 50%;
        top: 24px;
        transform: translateX(-50%);
    }

    .home-flow-node-subtitles {
        left: 50%;
        right: auto;
        bottom: 24px;
        transform: translateX(-50%);
    }

    .home-story-grid {
        gap: 14px;
    }

    .home-node-stage {
        width: min(100%, 460px);
        min-height: 320px;
    }

    .home-builder-node {
        width: 160px;
    }

    .home-builder-node-cut,
    .home-builder-node-format {
        width: 156px;
    }

    .home-builder-node-brand {
        width: 152px;
    }

    .home-builder-node-output {
        width: 164px;
    }

    .home-builder-node-input {
        left: 18px;
        top: 24px;
    }

    .home-builder-node-cut {
        left: 176px;
        top: 16px;
    }

    .home-builder-node-brand {
        right: 18px;
        top: 96px;
    }

    .home-builder-node-format {
        left: 112px;
        bottom: 38px;
    }

    .home-builder-node-output {
        right: 14px;
        bottom: 38px;
    }

    .home-ad-arrows {
        width: min(220px, 100%);
    }

    .home-ad-target-grid {
        grid-template-columns: 1fr;
    }

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

    .dashboard-start-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-feedback-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-start-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .dashboard-feedback-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .dashboard-cta-btn {
        min-width: 0;
    }

    .dashboard-feedback-btn {
        min-width: 0;
    }

    .pipeline-overview-actions {
        justify-content: flex-start;
    }

    .pipeline-overview-thumbs {
        gap: 8px;
    }

    .media-viewer-head,
    .media-viewer-footer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .media-viewer-top-actions,
    .media-viewer-actions,
    .media-viewer-nav {
        justify-content: space-between;
    }

    .media-viewer-video {
        width: min(100%, 300px);
    }
}

@media (max-width: 620px) {
    #homeView {
        padding: 16px;
    }

    .layout.layout-home-view .home-topnav {
        display: none;
    }

    .layout.layout-home-view .home-topbar-actions {
        justify-content: flex-start;
    }

    .home-hero-copy h1,
    .home-story-card h2,
    .home-transform-copy h2 {
        font-size: 28px;
    }

    .home-node-stage {
        min-height: 290px;
    }

    .home-newsletter-form {
        grid-template-columns: 1fr;
    }

    .home-newsletter-btn {
        width: 100%;
    }

    .home-builder-node,
    .home-builder-node-cut,
    .home-builder-node-brand,
    .home-builder-node-format,
    .home-builder-node-output {
        width: 140px;
    }

    .home-builder-node-input {
        left: 14px;
    }

    .home-builder-node-cut {
        left: 148px;
    }

    .home-builder-node-brand {
        right: 10px;
    }

    .home-builder-node-format {
        left: 80px;
    }

    .home-builder-node-output {
        right: 10px;
    }

    .dashboard-stats-grid {
        grid-template-columns: 1fr;
    }
}

.settings-detail-list {
    display: grid;
    gap: 10px;
}

.settings-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(141, 170, 183, 0.18);
}

.settings-detail-row:last-child {
    border-bottom: 0;
}

.settings-detail-row span {
    color: var(--text-muted);
}

.settings-access-card {
    display: grid;
    gap: 4px;
}

.settings-access-card.is-current {
    border-color: rgba(14, 159, 136, 0.32);
    background: linear-gradient(180deg, rgba(241, 252, 248, 0.96) 0%, rgba(231, 247, 244, 0.92) 100%);
}

.settings-access-card span,
.settings-access-card small {
    color: var(--text-muted);
}

.welcome-empty-state {
    border-radius: 16px;
    padding: 18px;
    background: rgba(244, 249, 251, 0.9);
    border: 1px dashed rgba(150, 176, 189, 0.52);
    display: grid;
    gap: 6px;
}

.welcome-empty-state strong {
    font-size: 15px;
}

@keyframes project-progress-sheen {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}

.view {
    animation: reveal 200ms ease;
}

#builderView {
    height: calc(100vh - 48px);
}

.builder-shell {
    position: relative;
    height: 100%;
    min-height: 420px;
    display: block;
    --builder-ai-hud-offset: 0px;
}

.layout.layout-builder-mode .sidebar {
    display: none;
}

.layout.layout-builder-mode {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: 0;
}

.layout.layout-builder-mode .panel {
    grid-column: 1;
    grid-row: 1;
    padding: 12px;
    overflow: hidden;
}

.layout.layout-builder-mode #builderView {
    height: calc(100vh - 24px);
}

.builder-shell.is-ai-collapsed {
    display: block;
}

.builder-main {
    position: relative;
    height: 100%;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.builder-ai-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 9;
    width: min(440px, calc(100% - 24px));
    max-width: 100%;
    min-width: 0;
    height: auto;
    border-radius: 16px;
    border: 1px solid rgba(112, 145, 160, 0.26);
    background:
        radial-gradient(circle at top left, rgba(35, 111, 132, 0.16) 0%, transparent 42%),
        linear-gradient(180deg, #112530 0%, #0d1c24 100%);
    backdrop-filter: blur(16px);
    color: #e8f4fa;
    box-shadow: 0 24px 48px rgba(5, 17, 23, 0.34);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

.builder-ai-sidebar-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding-left: 46px;
    min-height: 34px;
}

.builder-ai-sidebar-title-wrap h3 {
    margin: 4px 0 6px;
    font-size: 20px;
    line-height: 1.1;
}

.builder-ai-sidebar-title-wrap p {
    margin: 0;
    color: rgba(215, 232, 239, 0.82);
    font-size: 13px;
    line-height: 1.45;
}

.builder-ai-sidebar-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8cd9d0;
}

.builder-ai-sidebar-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, #82efe1 0%, #24bfad 100%);
    box-shadow: 0 0 10px rgba(36, 191, 173, 0.34);
}

.builder-ai-toggle-chip {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    border: 1px solid rgba(129, 171, 187, 0.38);
    background: rgba(233, 246, 252, 0.08);
    color: #e8f4fa;
    box-shadow: 0 8px 18px rgba(12, 39, 54, 0.12);
    transition: transform 180ms ease, opacity 180ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.builder-ai-sidebar-toggle {
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
}

.builder-ai-toggle-chip:hover {
    border-color: rgba(154, 202, 221, 0.66);
    background: rgba(233, 246, 252, 0.12);
}

.builder-ai-sidebar-toggle-icon {
    display: inline-block;
    font-size: 20px;
    line-height: 1;
}

.builder-ai-sidebar-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

.builder-ai-card {
    border-radius: 14px;
    border: 1px solid rgba(143, 187, 203, 0.22);
    background: rgba(255, 255, 255, 0.045);
    padding: 12px;
}

.builder-ai-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.builder-ai-intro-card {
    padding: 10px 12px;
}

.builder-ai-intro-card .builder-ai-card-head {
    align-items: center;
}

.builder-ai-intro-copy {
    min-width: 0;
}

.builder-ai-intro-copy strong {
    margin-bottom: 4px;
}

.builder-ai-card-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8db7c6;
    margin-bottom: 6px;
}

.builder-ai-card strong {
    display: block;
    font-size: 15px;
    margin-bottom: 6px;
}

.builder-ai-card p {
    margin: 0;
    color: rgba(219, 235, 241, 0.8);
    font-size: 13px;
    line-height: 1.45;
}

.builder-ai-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.builder-ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}

.builder-ai-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(125, 174, 192, 0.28);
    background: rgba(255, 255, 255, 0.04);
    color: #cfe3eb;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.builder-ai-chip:hover {
    border-color: rgba(143, 214, 204, 0.5);
    background: rgba(27, 148, 126, 0.16);
    transform: translateY(-1px);
}

.builder-ai-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(125, 174, 192, 0.28);
    background: rgba(255, 255, 255, 0.05);
    color: #d9edf4;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.builder-ai-limit-badge {
    padding: 0 12px;
    border-color: rgba(107, 225, 184, 0.26);
    background: rgba(24, 132, 108, 0.2);
    color: #dbf8ec;
}

.builder-ai-badge.is-warning {
    border-color: rgba(255, 205, 108, 0.32);
    background: rgba(255, 205, 108, 0.12);
    color: #ffe4a5;
}

.builder-ai-badge.is-running {
    border-color: rgba(119, 228, 221, 0.3);
    background: rgba(64, 174, 180, 0.14);
    color: #b9f5ef;
}

.builder-ai-thread {
    flex: 1;
    min-height: 240px;
    border-radius: 18px;
    border: 1px solid rgba(143, 187, 203, 0.18);
    background:
        linear-gradient(180deg, rgba(7, 15, 20, 0.78) 0%, rgba(10, 24, 31, 0.56) 100%),
        rgba(8, 18, 24, 0.28);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: auto;
}

.builder-ai-empty-state {
    margin: auto 0;
    border-radius: 14px;
    border: 1px dashed rgba(132, 189, 208, 0.22);
    background: rgba(19, 52, 63, 0.28);
    padding: 16px;
    color: #d7e9ef;
}

.builder-ai-empty-state strong {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
}

.builder-ai-empty-state p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(219, 235, 241, 0.8);
}

.builder-ai-message {
    align-self: flex-start;
    max-width: 88%;
    border-radius: 14px 14px 14px 6px;
    background: rgba(34, 75, 90, 0.42);
    border: 1px solid rgba(132, 189, 208, 0.18);
    padding: 13px 14px;
    box-shadow: 0 10px 24px rgba(3, 12, 18, 0.18);
}

.builder-ai-message.is-user {
    align-self: flex-end;
    border-radius: 14px 14px 6px 14px;
    background: linear-gradient(180deg, rgba(20, 120, 108, 0.3) 0%, rgba(16, 95, 87, 0.34) 100%);
    border-color: rgba(96, 225, 200, 0.22);
}

.builder-ai-message.is-system {
    align-self: stretch;
    background: rgba(70, 93, 106, 0.22);
    border-color: rgba(159, 187, 199, 0.2);
}

.builder-ai-message-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.builder-ai-message-role {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8cd9d0;
}

.builder-ai-message-time {
    font-size: 11px;
    color: rgba(205, 223, 231, 0.64);
}

.builder-ai-message p {
    margin: 0;
    color: #e6f2f7;
    font-size: 13px;
    line-height: 1.58;
}

.builder-ai-thinking {
    align-self: flex-start;
    max-width: 88%;
    border-radius: 14px 14px 14px 6px;
    border: 1px solid rgba(132, 189, 208, 0.18);
    background: rgba(27, 52, 64, 0.36);
    padding: 13px 14px;
    box-shadow: 0 10px 24px rgba(3, 12, 18, 0.18);
}

.builder-ai-thinking.is-warning {
    border-color: rgba(255, 205, 108, 0.26);
    background: rgba(102, 72, 25, 0.28);
}

.builder-ai-thinking-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 14px;
    margin-bottom: 8px;
}

.builder-ai-thinking-dots span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(177, 233, 244, 0.82);
    animation: builder-ai-thinking 1.15s ease-in-out infinite;
}

.builder-ai-thinking-dots span:nth-child(2) {
    animation-delay: 0.18s;
}

.builder-ai-thinking-dots span:nth-child(3) {
    animation-delay: 0.36s;
}

.builder-ai-thinking p {
    margin: 0;
    color: rgba(229, 241, 247, 0.92);
    font-size: 13px;
    line-height: 1.55;
}

.builder-ai-inline-status {
    min-height: 18px;
    font-size: 12px;
    color: rgba(205, 223, 231, 0.72);
}

.builder-ai-inline-status.is-error {
    color: #ffb8b2;
}

.builder-ai-inline-status.is-success {
    color: #9ff0c9;
}

.builder-ai-composer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(143, 187, 203, 0.18);
    background: rgba(255, 255, 255, 0.04);
}

.builder-ai-input {
    width: 100%;
    min-width: 0;
    border-radius: 10px;
    border: 1px solid rgba(123, 155, 169, 0.26);
    background: rgba(232, 241, 245, 0.08);
    color: rgba(232, 244, 250, 0.78);
    padding: 11px 12px;
}

.builder-ai-textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.5;
}

.builder-ai-input::placeholder {
    color: rgba(197, 215, 223, 0.66);
}

.builder-ai-composer-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.builder-ai-composer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.builder-ai-composer .ghost-btn[disabled],
.builder-ai-composer .primary-btn[disabled] {
    opacity: 0.52;
    cursor: not-allowed;
}

.builder-ai-hotkeys {
    background: rgba(255, 255, 255, 0.03);
}

.builder-ai-hotkeys-body {
    margin-top: 12px;
}

.builder-ai-hotkey-list {
    display: grid;
    gap: 8px;
}

.builder-ai-hotkey-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #dcebf1;
    font-size: 12px;
}

.builder-ai-hotkey-row span {
    min-width: 0;
}

.builder-ai-hotkey-row kbd {
    flex: 0 0 auto;
    min-width: 78px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(136, 186, 204, 0.22);
    background: rgba(10, 23, 30, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #8fe0d5;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    font-family: inherit;
}

.builder-ai-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(143, 187, 203, 0.24);
    background: rgba(255, 255, 255, 0.05);
    color: #d8edf5;
    font-size: 12px;
    font-weight: 700;
}

.builder-ai-mini-btn:hover {
    border-color: rgba(143, 214, 204, 0.52);
    background: rgba(27, 148, 126, 0.16);
}

.builder-shell.is-ai-collapsed .builder-ai-sidebar {
    display: none;
}

.builder-shell.is-ai-hidden .builder-ai-sidebar {
    display: none;
}

.builder-ai-hud-btn {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-12px) scale(0.9);
    min-width: 34px;
    padding: 0;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #117768;
    border-color: rgba(17, 119, 104, 0.24);
    background: rgba(232, 248, 245, 0.92);
}

.builder-ai-hud-btn:hover {
    border-color: rgba(14, 159, 136, 0.55);
    background: rgba(225, 245, 240, 0.98);
}

.builder-shell.is-ai-collapsed .builder-ai-hud-btn {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}

.builder-shell.is-ai-hidden .builder-ai-hud-btn {
    display: none;
}

@keyframes builder-ai-thinking {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.45;
    }
    50% {
        transform: translateY(-2px);
        opacity: 1;
    }
}

@media (max-width: 640px) {
    .builder-ai-sidebar {
        width: calc(100% - 10px);
    }

    .builder-zoom-controls {
        left: 10px;
    }

    .builder-ai-composer-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .builder-ai-composer-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .builder-ai-composer-actions .ghost-btn,
    .builder-ai-composer-actions .primary-btn {
        width: 100%;
    }
}

.hidden {
    display: none !important;
}

.empty-card,
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 10px;
}

.empty-card {
    max-width: 760px;
}

.empty-card h2 {
    margin: 0 0 7px;
}

.field-label {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 13px;
    color: var(--text-muted);
}

.text-input,
.text-area,
.select-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 8px 9px;
    font-size: 13px;
    color: var(--text-main);
    background: #fbfdff;
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.text-input:focus,
.text-area:focus,
.select-input:focus {
    border-color: rgba(14, 159, 136, 0.85);
    box-shadow: 0 0 0 3px rgba(14, 159, 136, 0.15);
}

.builder-setting-linked {
    border-color: rgba(14, 159, 136, 0.5) !important;
    background: #eef8f5 !important;
}

.flow-manager {
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f9fcfe;
    padding: 9px;
    display: grid;
    gap: 8px;
}

.flow-manager-top {
    display: grid;
    gap: 6px;
}

.flow-manager-top .field-label {
    margin: 0;
}

.flow-manager-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.toggle-row {
    margin-top: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-main);
}

.toggle-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.parallel-settings-row {
    margin-top: 10px;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.job-settings-stack {
    display: grid;
    gap: 4px;
}

.parallel-settings-row .toggle-row {
    margin-top: 0;
}

.bundle-size-wrap {
    min-width: 150px;
    display: grid;
    gap: 6px;
}

.bundle-size-wrap .field-label {
    margin: 0;
}

.bundle-size-input {
    width: 120px;
}

.setting-hint {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.action-row {
    margin-top: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.run-controls {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.run-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.run-section-head h3 {
    margin: 0;
}

.upload-progress {
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #f8fbfd;
    padding: 10px;
    margin-bottom: 10px;
    display: grid;
    gap: 8px;
}

.upload-progress.hidden {
    display: none;
}

.upload-progress.is-error {
    border-color: rgba(197, 67, 49, 0.28);
    background: #fff6f4;
}

.upload-progress.is-error .progress-fill {
    background: linear-gradient(90deg, #d26a57, #c54331);
}

.output-download-progress.is-pending .progress-fill {
    width: 32% !important;
    animation: output-download-pulse 1.2s ease-in-out infinite;
}

@keyframes output-download-pulse {
    0% {
        transform: translateX(-105%);
        opacity: 0.82;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(235%);
        opacity: 0.82;
    }
}

.upload-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.upload-progress-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.upload-progress-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.upload-progress-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(203, 91, 79, 0.45);
    background: rgba(203, 91, 79, 0.1);
    color: #b4473f;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.upload-progress-cancel-btn:hover {
    border-color: rgba(203, 91, 79, 0.72);
    background: rgba(203, 91, 79, 0.16);
    color: #8e3129;
}

.upload-progress-cancel-btn:disabled {
    cursor: wait;
    opacity: 0.72;
}

.upload-progress-label {
    font-size: 12px;
    color: #46616f;
}

.upload-progress-track {
    margin: 0;
}

.upload-progress-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.run-section-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.run-input-slots {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.run-input-slot {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    background: #fbfdff;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.run-input-slot.is-collapsed {
    background: #f8fbfd;
}

.run-input-slot.slot-kind-video {
    grid-column: span 2;
}

@media (max-width: 980px) {
    .run-input-slot.slot-kind-video {
        grid-column: auto;
    }
}

.run-input-slot.drag-active {
    border-color: var(--accent);
    background: #eefaf6;
}

.run-input-slot-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.run-input-slot-head h4 {
    margin: 0;
    font-size: 14px;
}

.run-input-slot-head p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.run-input-slot-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.media-preview-teaser {
    position: relative;
    padding-bottom: 8px;
    overflow: visible;
}

.media-preview-teaser.has-more::after,
.file-list.is-preview-teaser::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 132px;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, rgba(248, 251, 253, 0) 0%, rgba(248, 251, 253, 0.58) 32%, rgba(248, 251, 253, 0.92) 62%, rgba(248, 251, 253, 1) 100%);
    pointer-events: none;
    z-index: 1;
}

.media-preview-more {
    display: flex;
    justify-content: center;
    margin-top: -28px;
    position: relative;
    z-index: 2;
}

.media-preview-more-btn {
    border: 1px solid rgba(14, 159, 136, 0.32);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 249, 246, 0.98) 100%);
    color: #0a6658;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(14, 159, 136, 0.14);
}

.media-preview-more-btn:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(226, 246, 241, 1) 100%);
}

.run-slot-collapsed-summary {
    width: 100%;
    border: 1px dashed rgba(93, 128, 147, 0.42);
    border-radius: 10px;
    background: linear-gradient(180deg, #fcfeff 0%, #f2f8fa 100%);
    color: #3d5f71;
    text-align: left;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 13px;
}

.run-slot-collapsed-summary:hover {
    border-color: rgba(14, 159, 136, 0.45);
    background: #edf8f5;
}

.hidden-by-toggle {
    display: none !important;
}

.media-view-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(121, 152, 166, 0.34);
    border-radius: 10px;
    background: linear-gradient(180deg, #fbfdfe 0%, #eef4f6 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    overflow: hidden;
    flex: 0 0 auto;
}

.media-view-toggle-btn {
    width: 34px;
    height: 30px;
    border: 0;
    background: transparent;
    color: #597382;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 130ms ease, color 130ms ease;
}

.media-view-toggle-btn + .media-view-toggle-btn {
    border-left: 1px solid rgba(121, 152, 166, 0.24);
}

.media-view-toggle-btn svg {
    width: 15px;
    height: 15px;
    display: block;
}

.media-view-toggle-btn:hover {
    background: rgba(14, 159, 136, 0.08);
    color: #264554;
}

.media-view-toggle-btn:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px rgba(14, 159, 136, 0.24);
}

.media-view-toggle-btn.is-active {
    background: linear-gradient(180deg, rgba(14, 159, 136, 0.16) 0%, rgba(14, 159, 136, 0.1) 100%);
    color: #0d7363;
}

.run-input-drop-hint {
    border: 1px dashed #95b3c1;
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    color: #355466;
    background: linear-gradient(180deg, #fdfeff 0%, #f2f8fa 100%);
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.run-input-drop-hint:hover,
.run-input-drop-hint:focus-visible {
    border-color: #52a0b9;
    background: linear-gradient(180deg, #ffffff 0%, #e9f6fb 100%);
    box-shadow: 0 0 0 3px rgba(82, 160, 185, 0.14);
    outline: none;
}

.run-input-empty {
    border: 1px dashed #95b3c1;
    border-radius: 11px;
    padding: 12px 10px;
    color: var(--text-muted);
    background: #f8fbfd;
    text-align: center;
}

.run-input-folder-list {
    display: grid;
    gap: 10px;
}

.run-input-folder-card {
    background: #f7fbfd;
}

.run-input-folder-card.is-collapsed .run-input-folder-assets {
    display: none;
}

.run-input-folder-assets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
}

.run-input-folder-assets.is-list {
    grid-template-columns: 1fr;
}

.output-folder-list {
    display: block;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fcfeff;
    padding: 8px;
    max-height: 220px;
    overflow: auto;
    margin-bottom: 10px;
}

.output-folder-list.hidden {
    display: none;
}

.output-folder-branch {
    display: grid;
    gap: 4px;
}

.output-folder-children {
    display: grid;
    gap: 3px;
}

.output-folder-row {
    --depth: 0;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #1d3e50;
    min-height: 30px;
    padding: 5px 8px 5px calc(8px + (var(--depth) * 14px));
    font-size: 12px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.output-folder-row:hover {
    background: #eef6fb;
    border-color: rgba(85, 129, 152, 0.35);
}

.output-folder-row.active {
    background: #e7f8f3;
    border-color: rgba(14, 159, 136, 0.55);
    color: #195443;
}

.folder-icon {
    width: 16px;
    height: 14px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.folder-icon svg {
    width: 16px;
    height: 14px;
    display: block;
    filter: drop-shadow(0 1px 0 rgba(32, 54, 67, 0.24)) drop-shadow(0 2px 3px rgba(18, 38, 55, 0.22));
}

.output-folder-label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.output-folder-count {
    color: #4f6e7d;
    font-size: 11px;
}

.progress-wrap {
    margin-top: 11px;
}

.progress-track {
    width: 100%;
    height: 11px;
    border-radius: 999px;
    background: #dce7eb;
    overflow: hidden;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #3ca28f);
    transition: width 220ms ease;
}

.progress-meta {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.progress-copy {
    display: grid;
    justify-items: end;
    gap: 2px;
    text-align: right;
}

#progressStatusText {
    font-weight: 700;
    color: var(--text-main);
}

#progressDetailText {
    font-size: 12px;
    color: var(--text-muted);
}

.drop-zone {
    border: 2px dashed #95b3c1;
    border-radius: 14px;
    padding: 26px 14px;
    text-align: center;
    color: #36515f;
    background: linear-gradient(180deg, #fcfefe 0%, #f4f9fa 100%);
    cursor: pointer;
    transition: border-color 140ms ease, transform 140ms ease, background-color 140ms ease;
}

.drop-zone:hover,
.drop-zone.drag-active {
    border-color: var(--accent);
    transform: translateY(-1px);
    background: #ecf8f5;
}

.hidden-file-input {
    display: none;
}

.grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.file-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
}

.file-list.is-list {
    grid-template-columns: 1fr;
}

.file-list.is-preview-teaser {
    position: relative;
}

.asset-upload-row {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.asset-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.asset-item {
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #fbfdff;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.asset-main {
    min-width: 0;
}

.asset-name {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-path {
    font-size: 11px;
    color: #5d7887;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

.asset-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.asset-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.asset-kind-card h3 {
    margin: 0;
}

.asset-kind-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.asset-group-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-bottom: 8px;
}

.asset-drop-zone {
    border: 2px dashed #95b3c1;
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    color: #355364;
    cursor: pointer;
    background: linear-gradient(180deg, #fdfefe 0%, #f2f8fa 100%);
    transition: border-color 130ms ease, background-color 130ms ease;
}

.asset-drop-zone:hover,
.asset-drop-zone.drag-active {
    border-color: var(--accent);
    background: #ecf8f5;
}

.asset-drop-zone:focus-visible {
    outline: 0;
    border-color: var(--accent);
    background: #ecf8f5;
    box-shadow: 0 0 0 3px rgba(14, 159, 136, 0.16);
}

.asset-group-select {
    min-width: 170px;
}

.asset-folder-list {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.asset-folder-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fbfdff;
    padding: 10px;
    box-shadow: 0 5px 14px rgba(15, 42, 57, 0.04);
}

.asset-folder-card.is-ungrouped {
    background: #f9fcff;
}

.asset-folder-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.asset-folder-toggle {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.asset-folder-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.asset-folder-title-row > span {
    min-width: 0;
    display: grid;
}

.asset-folder-icon {
    width: 18px;
    height: 16px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.asset-folder-icon svg {
    width: 18px;
    height: 16px;
    display: block;
    filter: drop-shadow(0 1px 0 rgba(32, 54, 67, 0.18)) drop-shadow(0 2px 3px rgba(18, 38, 55, 0.16));
}

.asset-folder-title {
    font-size: 14px;
    font-weight: 700;
    color: #1b3441;
}

.asset-folder-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.asset-folder-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.asset-folder-chevron {
    width: 10px;
    height: 10px;
    margin-left: auto;
    border-right: 2px solid #587385;
    border-bottom: 2px solid #587385;
    transform: rotate(45deg);
    transition: transform 140ms ease;
}

.asset-folder-assets {
    grid-template-columns: 1fr;
}

.asset-folder-card.is-collapsed .asset-folder-assets {
    display: none;
}

.asset-folder-card.is-collapsed .asset-folder-chevron {
    transform: rotate(-45deg);
}

.assets-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.node-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.node-editor-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.node-editor-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 14px;
}

.node-editor-list-head {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.node-editor-list-head h3 {
    margin: 0;
}

.node-list {
    display: grid;
    gap: 8px;
    max-height: calc(100vh - 300px);
    overflow: auto;
    padding-right: 4px;
}

.node-list-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f9fcfe;
    padding: 9px 10px;
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 4px;
}

.node-list-item:hover {
    border-color: rgba(14, 159, 136, 0.55);
}

.node-list-item.active {
    border-color: rgba(14, 159, 136, 0.85);
    background: #eefaf6;
}

.node-list-title {
    font-size: 13px;
    font-weight: 600;
}

.node-list-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.node-form {
    display: grid;
    gap: 10px;
}

.node-form-grid {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 6px 10px;
    align-items: center;
}

.node-flag-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.node-subsection {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f9fcfe;
    padding: 10px;
}

.node-subsection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.node-subsection-head h4 {
    margin: 0;
    font-size: 14px;
}

.node-rows {
    display: grid;
    gap: 7px;
}

.node-row {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    background: #fff;
    display: grid;
    gap: 6px;
}

.node-row-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px auto auto;
    gap: 6px;
    align-items: center;
}

.node-row select,
.node-row input {
    width: 100%;
}

.node-row .danger-btn {
    justify-self: end;
}

.node-row-options {
    display: grid;
    gap: 4px;
}

.node-row-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-main);
}

.node-row-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.node-row-options.hidden {
    display: none !important;
}

.node-editor-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.video-card-item {
    list-style: none;
}

.video-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    background: linear-gradient(180deg, #fcfeff 0%, #f4f9fb 100%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    box-shadow: 0 10px 22px rgba(13, 34, 46, 0.06);
}

.video-card.is-list {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 8px 10px;
}

.media-card-tools {
    display: flex;
    justify-content: flex-end;
}

.media-select-toggle {
    border: 1px solid rgba(93, 135, 153, 0.22);
    border-radius: 999px;
    background: rgba(245, 250, 252, 0.94);
    color: #325364;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 9px;
    cursor: pointer;
}

.media-select-toggle.is-selected {
    background: rgba(14, 159, 136, 0.12);
    border-color: rgba(14, 159, 136, 0.28);
    color: #0d7363;
}

.media-select-action {
    margin-right: auto;
}

.media-thumb-button {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.media-thumb-shell {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(26, 40, 48, 0.9) 0%, rgba(12, 22, 28, 0.96) 100%);
    box-shadow: 0 12px 22px rgba(9, 20, 26, 0.16);
}

.video-card.is-list .media-thumb-button {
    width: 74px;
}

.video-card.is-list .media-thumb-shell {
    width: 74px;
    height: 54px;
    aspect-ratio: auto;
    border-radius: 10px;
}

.media-thumb-shell.is-selected {
    box-shadow: 0 0 0 2px rgba(14, 159, 136, 0.22), 0 14px 26px rgba(9, 20, 26, 0.18);
}

.media-thumb-shell::before {
    content: none;
}

.media-thumb-shell.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 48%, transparent 100%);
    animation: media-thumb-shimmer 1.2s linear infinite;
}

.media-thumb-shell.is-failed {
    background: linear-gradient(180deg, rgba(21, 33, 39, 0.92) 0%, rgba(15, 25, 31, 0.98) 100%);
}

.media-thumb-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.video-card.is-list .media-thumb-image {
    object-fit: cover;
}

.media-thumb-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(8, 19, 25, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
}

.video-card.is-list .media-thumb-play {
    width: 28px;
    height: 28px;
}

.media-thumb-play::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 10px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid rgba(255, 255, 255, 0.92);
}

.video-card.is-list .media-thumb-play::before {
    left: 11px;
    top: 8px;
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 8px;
}

.video-preview {
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 8px;
    background: #0e1c24;
    object-fit: contain;
    overflow: hidden;
}

.video-preview.is-landscape {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
}

.image-preview {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: #e9f1f5;
    object-fit: contain;
}

.video-card.is-list .image-preview {
    width: 74px;
    height: 54px;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 10px;
}

.audio-preview {
    width: 100%;
    border-radius: 9px;
}

.asset-preview-fallback {
    border-radius: 9px;
    border: 1px dashed #a6c0ce;
    background: #f1f8fb;
    color: #355467;
    font-size: 12px;
    padding: 18px 10px;
    text-align: center;
}

.video-card.is-list .asset-preview-fallback {
    width: 74px;
    min-height: 54px;
    padding: 8px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-details {
    min-width: 0;
    flex: 1;
}

.video-card.is-list .video-details {
    align-self: center;
}

.video-card.is-list .file-name {
    -webkit-line-clamp: 1;
}

.video-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    margin-top: auto;
    flex-wrap: wrap;
}

.video-card.is-list .video-actions {
    margin-top: 0;
    justify-content: flex-end;
}

.video-card.is-list .media-select-action {
    margin-right: 0;
}

.video-card.is-list .video-actions > * {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .video-card.is-list {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .video-card.is-list .video-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

.media-viewer-modal {
    position: fixed;
    inset: 0;
    z-index: 1240;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(5, 14, 20, 0.76);
    backdrop-filter: blur(12px);
}

.media-viewer-card {
    width: min(980px, calc(100vw - 28px));
    max-height: min(calc(100vh - 28px), 920px);
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(85, 117, 132, 0.24);
    background:
        radial-gradient(circle at top right, rgba(17, 188, 158, 0.1) 0%, transparent 28%),
        linear-gradient(180deg, rgba(247, 251, 252, 0.98) 0%, rgba(237, 245, 247, 0.95) 100%);
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.28);
    padding: 16px;
    display: grid;
    gap: 14px;
}

.media-viewer-head,
.media-viewer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.media-viewer-title-wrap {
    min-width: 0;
    flex: 1 1 340px;
}

.media-viewer-title-wrap h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.media-viewer-title-wrap p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.media-viewer-top-actions,
.media-viewer-actions,
.media-viewer-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.media-viewer-top-actions {
    justify-content: flex-end;
    flex: 0 0 auto;
}

.media-viewer-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.media-viewer-actions {
    justify-content: flex-end;
}

.media-viewer-close-btn span {
    font-size: 26px;
    line-height: 1;
}

.media-viewer-stage-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 320px;
    max-height: min(62vh, 720px);
    min-width: 0;
    padding: 12px 16px;
    border-radius: 16px;
    background:
        linear-gradient(rgba(116, 145, 157, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(116, 145, 157, 0.09) 1px, transparent 1px),
        linear-gradient(180deg, rgba(8, 20, 26, 0.94) 0%, rgba(10, 24, 31, 0.98) 100%);
    background-size: 26px 26px, 26px 26px, auto;
    overflow: hidden;
}

.media-viewer-video {
    width: min(100%, 286px);
    max-height: min(58vh, 620px);
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    background: #09161d;
    object-fit: contain;
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.32);
}

.media-viewer-position {
    min-width: 68px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #355667;
}

@keyframes media-thumb-shimmer {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 9px 11px;
    background: #fcfeff;
}

.file-name {
    font-size: 12px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.file-meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

.file-submeta {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-download {
    color: var(--accent-strong);
    text-decoration: none;
    border: 1px solid rgba(14, 159, 136, 0.4);
    border-radius: 9px;
    padding: 5px 8px;
    font-size: 11px;
}

.file-item-empty {
    grid-column: 1 / -1;
}

.file-download:hover {
    background: rgba(14, 159, 136, 0.1);
}

.media-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 5px 10px;
    border-radius: 9px;
    border: 1px solid rgba(14, 159, 136, 0.32);
    background: #f3f8fa;
    color: #244453;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 130ms ease, background 130ms ease, color 130ms ease, transform 130ms ease;
}

.media-action-btn:hover {
    border-color: rgba(14, 159, 136, 0.46);
    background: rgba(14, 159, 136, 0.08);
    transform: translateY(-1px);
}

.media-action-btn.media-action-btn-danger {
    border-color: #f2c7c0;
    background: #fff2f0;
    color: var(--danger);
}

.media-action-btn.media-action-btn-danger:hover {
    background: #ffe8e4;
    border-color: #ebb5ac;
}

.media-action-btn[disabled] {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
}

.muted-text {
    color: var(--text-muted);
    margin-top: 5px;
}

.primary-btn,
.ghost-btn,
.danger-btn,
.warn-btn {
    border-radius: 10px;
    padding: 8px 11px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 130ms ease;
}

.primary-btn {
    color: #f5fffd;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
    box-shadow: 0 6px 14px rgba(14, 159, 136, 0.25);
}

.primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 16px rgba(14, 159, 136, 0.32);
}

.primary-btn.is-saved {
    animation: save-flash 560ms ease;
}

.ghost-btn {
    background: #f3f8fa;
    border-color: var(--border);
    color: #244453;
}

.ghost-btn:hover {
    border-color: #b4cdd9;
}

.report-trigger-btn {
    background: linear-gradient(180deg, #fff4bf 0%, #ffe58f 100%);
    border-color: rgba(191, 146, 25, 0.32);
    color: #6f4d00;
    box-shadow: 0 8px 18px rgba(191, 146, 25, 0.16);
}

.report-trigger-btn:hover {
    background: linear-gradient(180deg, #fff7cf 0%, #ffeb9f 100%);
    border-color: rgba(191, 146, 25, 0.42);
    box-shadow: 0 10px 20px rgba(191, 146, 25, 0.2);
}

.report-trigger-btn:disabled {
    background: #f6efcf;
    border-color: rgba(188, 173, 118, 0.26);
    color: #938568;
    box-shadow: none;
}

.danger-btn {
    background: #fff2f0;
    color: var(--danger);
    border-color: #f2c7c0;
}

.danger-btn:hover {
    background: #ffe8e4;
}

.warn-btn {
    background: linear-gradient(180deg, #fff6cf 0%, #ffe29a 100%);
    color: #6f4d00;
    border-color: rgba(191, 146, 25, 0.3);
}

.warn-btn:hover {
    border-color: rgba(191, 146, 25, 0.42);
    background: linear-gradient(180deg, #fff9dc 0%, #ffeab1 100%);
}

.tiny-btn {
    padding: 5px 7px;
    font-size: 11px;
}

.confirm-modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 30, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 16px;
}

.project-context-menu {
    position: fixed;
    min-width: 160px;
    border: 1px solid rgba(126, 154, 170, 0.6);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 1250;
    display: grid;
    gap: 4px;
}

.project-context-item {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #f7fbfd;
    color: #1f4558;
    font-size: 13px;
    text-align: left;
    padding: 7px 9px;
    cursor: pointer;
}

.project-context-item:hover {
    border-color: rgba(14, 159, 136, 0.45);
    background: #ebf7f4;
}

.project-context-item.is-danger {
    color: #a63b35;
    background: #fff4f2;
}

.project-context-item.is-danger:hover {
    border-color: rgba(204, 78, 65, 0.4);
    background: #ffe8e4;
}

.subtitle-designer-modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 30, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1230;
    padding: 16px;
}

.subtitle-designer-card {
    width: min(1220px, 100%);
    max-height: calc(100vh - 44px);
    overflow: auto;
    background: #f8fbfd;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 12px;
    display: grid;
    gap: 10px;
}

.subtitle-designer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.subtitle-designer-head h3 {
    margin: 0;
}

.subtitle-designer-body {
    display: grid;
    grid-template-columns: minmax(620px, 1fr) minmax(290px, 350px);
    gap: 18px;
}

.subtitle-designer-left {
    display: grid;
    gap: 10px;
    justify-items: center;
    align-content: start;
}

.subtitle-designer-ratio-row {
    display: grid;
    gap: 6px;
}

.subtitle-designer-custom-ratio {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}

.subtitle-designer-custom-ratio span {
    color: var(--text-muted);
    font-weight: 600;
}

.subtitle-designer-preview-shell {
    width: min(100%, 760px);
    height: min(860px, calc(100vh - 220px));
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.subtitle-designer-preview {
    width: 462px;
    height: 820px;
    aspect-ratio: 9 / 16;
    border: 1px solid #bdd3de;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f7fa 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    user-select: none;
    margin: 0;
}

.subtitle-designer-guide {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease;
}

.subtitle-designer-guide.is-active {
    opacity: 0.9;
}

.subtitle-designer-guide-horizontal {
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-0.5px);
    background: repeating-linear-gradient(90deg, rgba(16, 81, 112, 0.62) 0 10px, rgba(16, 81, 112, 0.18) 10px 18px);
}

.subtitle-designer-guide-vertical {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-0.5px);
    background: repeating-linear-gradient(180deg, rgba(16, 81, 112, 0.62) 0 10px, rgba(16, 81, 112, 0.18) 10px 18px);
}

.subtitle-designer-text {
    position: absolute;
    left: 24px;
    top: 24px;
    width: 168px;
    height: 58px;
    border: 1px dashed rgba(10, 52, 75, 0.45);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: pre-line;
    overflow: hidden;
    cursor: move;
    z-index: 1;
}

.subtitle-designer-text-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
    align-items: center;
}

.subtitle-designer-line {
    display: inline-block;
    width: max-content;
    max-width: 100%;
    padding: 0.12em 0.34em 0.18em;
    border-radius: 0.28em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    text-align: center;
}

.subtitle-designer-word {
    display: inline-block;
    vertical-align: baseline;
    transform-origin: center bottom;
}

.subtitle-designer-line.is-animated {
    animation: subtitle-designer-pop 1.2s ease-out 1 both;
    transform-origin: center center;
}

.subtitle-designer-resize {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid #0b3650;
    background: #13a78d;
    cursor: nwse-resize;
    padding: 0;
}

.subtitle-designer-right {
    display: grid;
    gap: 10px;
    align-content: start;
    max-height: min(860px, calc(100vh - 220px));
    overflow-y: auto;
    padding-right: 8px;
}

.subtitle-designer-toggle-copy {
    display: grid;
    gap: 2px;
}

.subtitle-designer-subtoggle {
    margin-top: -4px;
    margin-left: 24px;
}

.subtitle-designer-toggle-note {
    font-size: 11px;
    line-height: 1.25;
    color: var(--text-muted);
    font-weight: 500;
}

.subtitle-designer-inline-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.subtitle-designer-inline-grid .field-label {
    margin-bottom: 4px;
}

.subtitle-designer-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.subtitle-designer-color-row .field-label {
    margin: 0;
}

.subtitle-designer-font-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.subtitle-designer-font-row span {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

.subtitle-designer-right input[type="color"] {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0;
    background: #ffffff;
    cursor: pointer;
    overflow: hidden;
}

.subtitle-designer-right input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.subtitle-designer-right input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 999px;
}

.subtitle-designer-advanced {
    border: 1px solid #d2e1e8;
    border-radius: 10px;
    padding: 8px;
    background: #fdfefe;
    display: grid;
    gap: 8px;
}

.subtitle-designer-advanced summary {
    cursor: pointer;
    font-size: 13px;
    color: #274b5d;
    font-weight: 600;
}

.subtitle-designer-advanced .toggle-row {
    margin: 0;
}

.subtitle-designer-right .builder-port-label {
    margin-top: -4px;
}

.subtitle-designer-media-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.subtitle-designer-media-tools .ghost-btn {
    width: 100%;
    min-width: 0;
}

.subtitle-designer-preview-source {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid #d2e1e8;
    border-radius: 10px;
    background: #fdfefe;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.subtitle-designer-preview-source .field-label {
    margin: 0;
}

.subtitle-designer-preview-source-help {
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-muted);
}

.subtitle-designer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-top: auto;
    padding: 12px 0 2px;
    background: linear-gradient(180deg, rgba(248, 251, 253, 0) 0%, rgba(248, 251, 253, 0.92) 32%, rgba(248, 251, 253, 1) 100%);
    border-top: 1px solid rgba(189, 211, 222, 0.7);
}

@keyframes subtitle-designer-pop {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    14% {
        opacity: 1;
        transform: scale(1.03);
    }
    78% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0.9;
        transform: scale(0.96);
    }
}

.confirm-modal-card {
    width: min(460px, 100%);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 14px;
}

.confirm-modal-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.confirm-modal-card p {
    margin: 0;
    color: var(--text-muted);
    white-space: pre-wrap;
}

.download-ready-modal-card {
    width: min(560px, 100%);
    display: grid;
    gap: 10px;
}

.settings-brand-assets-card {
    display: grid;
    gap: 12px;
}

.settings-brand-assets-note {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(150, 192, 201, 0.6);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(243, 250, 249, 0.95) 0%, rgba(235, 247, 246, 0.98) 100%);
    color: #2d5564;
}

.settings-brand-assets-note strong {
    color: #163946;
    white-space: nowrap;
}

.settings-brand-assets-note span {
    color: #4b6f7d;
    line-height: 1.5;
}

.brand-assets-modal-card {
    width: min(1100px, calc(100vw - 32px));
    max-height: min(94vh, 1080px);
    display: grid;
    gap: 10px;
    overflow: hidden;
    padding: 14px;
}

.brand-assets-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.brand-assets-modal-head h3 {
    margin-bottom: 2px;
    font-size: 18px;
}

.brand-assets-modal-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.brand-assets-summary-card {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(152, 189, 201, 0.62);
    background: linear-gradient(180deg, rgba(247, 251, 253, 0.98) 0%, rgba(237, 246, 249, 0.98) 100%);
}

.brand-assets-summary-card span,
.brand-assets-summary-card small {
    color: #5d7785;
}

.brand-assets-summary-card strong {
    color: #163946;
    font-size: 16px;
    line-height: 1.2;
}

.brand-assets-modal-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.brand-assets-tab {
    min-width: 112px;
    border: 1px solid rgba(152, 189, 201, 0.72);
    border-radius: 12px;
    background: #f8fbfd;
    color: #355364;
    padding: 8px 10px;
    display: grid;
    gap: 2px;
    text-align: left;
    cursor: pointer;
    transition: border-color 130ms ease, background-color 130ms ease, transform 130ms ease;
}

.brand-assets-tab:hover {
    border-color: rgba(14, 159, 136, 0.45);
    background: #eefaf7;
    transform: translateY(-1px);
}

.brand-assets-tab strong {
    color: #173948;
    font-size: 13px;
}

.brand-assets-tab span {
    color: #6a8592;
    font-size: 11px;
}

.brand-assets-tab.active {
    border-color: rgba(14, 159, 136, 0.55);
    background: linear-gradient(180deg, rgba(231, 248, 243, 0.98) 0%, rgba(214, 242, 234, 0.98) 100%);
    box-shadow: inset 0 0 0 1px rgba(14, 159, 136, 0.18);
}

.brand-assets-modal-sections {
    min-height: 0;
    overflow: auto;
    padding-right: 6px;
    padding-bottom: 2px;
}

.brand-assets-modal-slot {
    display: grid;
    gap: 10px;
}

.brand-assets-slot-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.brand-assets-slot-copy {
    display: grid;
    gap: 2px;
}

.brand-assets-slot-copy h3 {
    margin: 0;
    font-size: 16px;
}

.brand-assets-slot-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(96px, 1fr));
    gap: 6px;
}

.brand-assets-slot-stat {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(152, 189, 201, 0.55);
    background: rgba(247, 251, 253, 0.94);
}

.brand-assets-slot-stat strong {
    color: #173948;
}

.brand-assets-slot-stat span {
    color: #688390;
    font-size: 11px;
}

.brand-assets-upload-panel {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(151, 189, 201, 0.58);
    background: linear-gradient(180deg, rgba(247, 251, 253, 0.98) 0%, rgba(238, 246, 249, 0.98) 100%);
}

.brand-assets-upload-copy {
    display: grid;
    gap: 2px;
}

.brand-assets-upload-copy strong {
    color: #163946;
}

.brand-assets-upload-copy span {
    color: #5c7685;
    line-height: 1.35;
    font-size: 12px;
}

.brand-assets-group-row {
    margin-bottom: 0;
}

.brand-assets-drop-zone {
    padding: 14px 12px;
    font-weight: 600;
    font-size: 13px;
}

.brand-assets-folder-list {
    margin-top: 0;
}

.brand-assets-info-generator {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(210px, 0.9fr) auto;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(151, 189, 201, 0.58);
    border-radius: 14px;
    background: rgba(247, 251, 253, 0.9);
}

.brand-assets-info-runs {
    padding: 12px 14px;
    border: 1px solid rgba(151, 189, 201, 0.5);
    border-radius: 14px;
    background: rgba(251, 253, 255, 0.92);
}

.brand-assets-info-generator {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(151, 189, 201, 0.58);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(247, 251, 253, 0.98) 0%, rgba(238, 246, 249, 0.98) 100%);
}

.brand-info-generator-copy {
    display: grid;
    gap: 2px;
}

.brand-info-generator-copy strong {
    color: #163946;
}

.brand-info-generator-copy span {
    color: #5c7685;
    line-height: 1.3;
    font-size: 12px;
}

.brand-info-generator-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(220px, 0.9fr) auto;
    gap: 6px;
}

.brand-info-run-list {
    display: grid;
    gap: 8px;
}

.brand-info-run-card {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(151, 189, 201, 0.46);
    background: rgba(255, 255, 255, 0.92);
}

.brand-info-run-card.is-completed {
    border-color: rgba(14, 159, 136, 0.28);
}

.brand-info-run-card.is-failed {
    border-color: rgba(215, 102, 91, 0.3);
}

.brand-info-run-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.brand-info-run-head strong {
    color: #173948;
}

.brand-info-run-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(230, 242, 247, 0.9);
    color: #315060;
    font-size: 11px;
    font-weight: 700;
}

.brand-info-run-meta,
.brand-info-run-detail,
.brand-info-editor-meta,
.brand-info-run-empty,
.brand-info-editor-empty {
    color: #5c7685;
    font-size: 12px;
    line-height: 1.35;
}

.brand-info-run-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.brand-info-editor {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(151, 189, 201, 0.58);
    background: rgba(247, 251, 253, 0.94);
}

.brand-info-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.brand-info-editor-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.brand-info-editor-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.brand-info-editor-note {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(231, 243, 248, 0.86);
    color: #446675;
    font-size: 13px;
}

.brand-info-editor-note.is-error {
    background: rgba(255, 236, 233, 0.92);
    color: #9f4134;
}

.brand-info-editor-note.is-warning {
    background: rgba(255, 247, 225, 0.92);
    color: #8c6618;
}

.brand-info-editor-textarea {
    min-height: 340px;
    resize: vertical;
    font-family: Consolas, "Courier New", monospace;
    line-height: 1.45;
    font-size: 13px;
}

@media (max-width: 960px) {
    .brand-info-generator-controls,
    .brand-info-editor-controls {
        grid-template-columns: 1fr;
    }

    .brand-info-editor-actions {
        justify-content: flex-start;
    }
}

.download-ready-progress {
    margin-bottom: 0;
}

.login-modal-card {
    width: min(460px, 100%);
}

.login-form-help-row {
    display: flex;
    justify-content: flex-end;
    margin-top: -2px;
}

.reset-password-shell {
    padding-block: 40px 72px;
}

.reset-password-card {
    margin: 0 auto;
}

.report-modal-card {
    width: min(620px, 100%);
}

.template-name-modal-card {
    width: min(480px, 100%);
}

.template-editor-modal-card {
    width: min(560px, 100%);
}

.template-name-modal-form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.template-editor-modal-form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.template-editor-visibility {
    display: grid;
    gap: 6px;
}

.template-name-modal-error {
    font-size: 12px;
    color: var(--danger);
}

.project-create-modal-card {
    width: min(980px, 100%);
    display: grid;
    gap: 14px;
}

.project-create-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.project-create-modal-copy {
    display: grid;
    gap: 6px;
}

.project-create-modal-close {
    min-width: 40px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
}

.project-create-template-list {
    display: grid;
    gap: 12px;
    max-height: min(68vh, 620px);
    overflow: auto;
    padding-right: 4px;
}

.project-create-template-card {
    border: 1px solid rgba(161, 188, 200, 0.72);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 251, 0.96) 100%);
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    box-shadow: 0 14px 28px rgba(15, 37, 50, 0.08);
}

.project-create-template-preview {
    min-width: 0;
}

.project-create-template-body {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.project-create-template-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.project-create-template-title {
    font-size: 16px;
    line-height: 1.3;
    color: #16384a;
}

.project-create-template-description {
    margin: 0;
    color: #597689;
    line-height: 1.55;
}

.project-create-template-actions {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.project-create-empty-state {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    border: 1px dashed rgba(96, 129, 144, 0.42);
    border-radius: 14px;
    background: rgba(243, 249, 252, 0.88);
    color: #567284;
}

.project-create-empty-state strong {
    color: #18394a;
}

.project-create-modal-actions {
    justify-content: flex-end;
}

@media (max-width: 860px) {
    .project-create-template-card {
        grid-template-columns: 1fr;
    }

    .project-create-modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .project-create-modal-actions > button {
        width: 100%;
    }

    .brand-assets-modal-summary,
    .brand-assets-slot-stats,
    .brand-assets-info-generator {
        grid-template-columns: 1fr;
    }

    .brand-assets-slot-head,
    .brand-assets-modal-head,
    .settings-brand-assets-note {
        grid-template-columns: 1fr;
        display: grid;
    }

    .brand-assets-modal-card {
        width: min(100vw - 24px, 100%);
        max-height: min(96vh, 100%);
        padding: 12px;
    }
}

.report-modal-form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.report-modal-textarea {
    min-height: 150px;
    resize: vertical;
}

.run-input-slot-text {
    overflow: hidden;
}

.run-prompt-input-panel {
    display: grid;
    gap: 8px;
}

.run-input-slot-text .builder-setting-row > label {
    color: #35586a;
}

.run-input-slot-text .text-area {
    color: #18394a;
    background: #ffffff;
    border-color: rgba(151, 183, 198, 0.72);
    font-size: 15px;
    line-height: 1.55;
}

.run-input-slot-text .text-area::placeholder {
    color: #7c97a8;
}

.feedback-toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1280;
    width: min(360px, calc(100vw - 24px));
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(149, 119, 24, 0.24);
    background: linear-gradient(180deg, rgba(255, 247, 210, 0.98) 0%, rgba(255, 238, 177, 0.98) 100%);
    color: #694c00;
    box-shadow: 0 16px 34px rgba(57, 44, 4, 0.16);
    animation: feedback-toast-in 180ms ease;
}

.feedback-toast strong {
    font-size: 13px;
}

.feedback-toast span {
    font-size: 12px;
    line-height: 1.45;
}

@keyframes feedback-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.timeline-log-modal {
    position: fixed;
    inset: 0;
    background: rgba(8, 16, 28, 0.58);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1240;
    padding: 18px;
}

.timeline-log-modal-card {
    width: min(1120px, 100%);
    max-height: calc(100vh - 40px);
    display: grid;
    gap: 12px;
    background: linear-gradient(180deg, #f9fcfe 0%, #f2f8fb 100%);
    border: 1px solid rgba(147, 177, 192, 0.7);
    border-radius: 16px;
    box-shadow: 0 22px 48px rgba(12, 28, 42, 0.28);
    padding: 14px;
}

.timeline-log-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.timeline-log-title-wrap {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.timeline-log-title-wrap h3 {
    margin: 0;
    font-size: 19px;
    color: #17384a;
}

.timeline-log-title-wrap p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #537487;
    word-break: break-word;
}

.timeline-log-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.timeline-log-body {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: 12px;
    min-height: 320px;
    max-height: calc(100vh - 170px);
}

.timeline-log-entry-list {
    border: 1px solid rgba(29, 56, 74, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
    padding: 8px;
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 6px;
}

.timeline-log-entry-group {
    display: grid;
    gap: 6px;
}

.timeline-log-group-title {
    padding: 2px 4px 1px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #436476;
}

.timeline-log-folder {
    border-radius: 10px;
}

.timeline-log-folder[open] > .timeline-log-folder-summary {
    background: #edf5fa;
    border-color: rgba(57, 95, 121, 0.28);
}

.timeline-log-folder-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    color: #29495d;
    background: rgba(244, 248, 251, 0.72);
}

.timeline-log-folder-summary::-webkit-details-marker {
    display: none;
}

.timeline-log-folder-summary::before {
    content: ">";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    margin-right: 6px;
    color: #5b7789;
    font-weight: 800;
    transform: rotate(0deg);
    transition: transform 120ms ease;
}

.timeline-log-folder[open] > .timeline-log-folder-summary::before {
    transform: rotate(90deg);
}

.timeline-log-folder-name {
    min-width: 0;
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-log-folder-count {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #d8e7f2;
    color: #355467;
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.timeline-log-folder-children {
    margin-left: 12px;
    padding-left: 10px;
    border-left: 1px dashed rgba(84, 119, 143, 0.28);
    display: grid;
    gap: 6px;
    padding-top: 6px;
}

.timeline-log-entry {
    border: 1px solid rgba(51, 91, 119, 0.26);
    background: #f4f8fb;
    border-radius: 10px;
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 2px;
    min-width: 0;
}

.timeline-log-entry strong {
    font-size: 12px;
    color: #193b4c;
    line-height: 1.35;
    word-break: break-word;
}

.timeline-log-entry span {
    font-size: 11px;
    color: #537487;
    line-height: 1.3;
    word-break: break-word;
}

.timeline-log-entry.is-active {
    border-color: rgba(33, 100, 144, 0.6);
    background: #dff1ff;
    box-shadow: inset 0 0 0 1px rgba(20, 99, 148, 0.24);
}

.timeline-log-empty {
    font-size: 12px;
    color: #537487;
    padding: 6px 8px;
}

.timeline-log-content {
    margin: 0;
    min-height: 320px;
    max-height: calc(100vh - 170px);
    overflow: auto;
    padding: 14px;
    border: 1px solid rgba(29, 56, 74, 0.22);
    border-radius: 12px;
    background: #0f1723;
    color: #deebf7;
    font-size: 12px;
    line-height: 1.52;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.confirm-modal-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

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

.confirm-consent-box {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(125, 171, 188, 0.28);
    background:
        radial-gradient(circle at top right, rgba(107, 228, 200, 0.14), transparent 38%),
        linear-gradient(180deg, rgba(244, 249, 252, 0.98) 0%, rgba(237, 245, 249, 0.98) 100%);
}

.confirm-consent-box strong {
    color: #173443;
    font-size: 14px;
}

.confirm-consent-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #234857;
    line-height: 1.55;
    cursor: pointer;
}

.confirm-consent-check input {
    margin: 3px 0 0;
    accent-color: #0e9f88;
    flex: 0 0 auto;
}

.confirm-consent-check span {
    color: #234857;
}

.confirm-consent-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #557381;
}

.confirm-consent-note a {
    color: #0f8f78;
    font-weight: 700;
    text-decoration: none;
}

.confirm-consent-note a:hover {
    text-decoration: underline;
}

@media (max-width: 760px) {
    .timeline-log-header {
        flex-direction: column;
    }

    .timeline-log-actions {
        width: 100%;
        justify-content: stretch;
    }

    .timeline-log-actions .ghost-btn,
    .timeline-log-actions .primary-btn {
        flex: 1 1 0;
    }

    .timeline-log-body {
        grid-template-columns: 1fr;
        max-height: calc(100vh - 220px);
    }

    .timeline-log-entry-list {
        max-height: 180px;
    }

    .timeline-log-content {
        min-height: 220px;
        max-height: calc(100vh - 380px);
    }
}

body.modal-open {
    overflow: hidden;
}

@keyframes save-flash {
    0% {
        transform: scale(1);
        box-shadow: 0 6px 14px rgba(14, 159, 136, 0.25);
    }
    45% {
        transform: scale(1.035);
        box-shadow: 0 0 0 6px rgba(14, 159, 136, 0.2), 0 12px 18px rgba(14, 159, 136, 0.32);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 6px 14px rgba(14, 159, 136, 0.25);
    }
}

.btn-plus {
    font-size: 18px;
    line-height: 1;
}

.builder-canvas-wrap {
    position: relative;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 14px;
    height: 100%;
    min-height: 420px;
    min-width: 0;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(88, 122, 139, 0.11) 1px, transparent 1px),
        linear-gradient(180deg, rgba(88, 122, 139, 0.11) 1px, transparent 1px),
        #f5fafc;
    background-size: 32px 32px, 32px 32px, auto;
    box-shadow: var(--shadow-sm);
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: default;
    touch-action: none;
}

.builder-canvas-wrap::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.builder-canvas-wrap.panning {
    cursor: grabbing;
}

.builder-selection-box {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    border: 1px solid rgba(31, 169, 255, 0.68);
    background: rgba(31, 169, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}

.builder-floating-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 6px;
    max-width: calc(100vw - 20px);
    border-radius: 11px;
    background: rgba(245, 252, 255, 0.92);
    border: 1px solid rgba(140, 168, 181, 0.5);
    backdrop-filter: blur(4px);
}

.builder-history-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
}

.builder-history-btn[disabled] {
    opacity: 0.42;
    cursor: not-allowed;
}

.builder-rename {
    position: absolute;
    top: 56px;
    right: 10px;
    z-index: 7;
    min-width: 300px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 11px;
    background: rgba(245, 252, 255, 0.95);
    border: 1px solid rgba(140, 168, 181, 0.55);
    backdrop-filter: blur(4px);
    box-shadow: 0 10px 20px rgba(22, 52, 66, 0.18);
}

.builder-rename-input {
    width: 100%;
    border: 1px solid rgba(115, 149, 164, 0.65);
    border-radius: 8px;
    padding: 8px 9px;
    font-size: 13px;
    background: #f8fcff;
    color: #1a4656;
    outline: none;
}

.builder-rename-input:focus {
    border-color: rgba(14, 159, 136, 0.82);
    box-shadow: 0 0 0 3px rgba(14, 159, 136, 0.14);
}

.builder-rename-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.builder-templates-panel {
    position: absolute;
    top: 56px;
    right: 10px;
    z-index: 7;
    width: min(430px, calc(100vw - 20px));
    max-height: min(70vh, 620px);
    overflow: auto;
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(245, 252, 255, 0.97);
    border: 1px solid rgba(140, 168, 181, 0.55);
    backdrop-filter: blur(4px);
    box-shadow: 0 12px 26px rgba(22, 52, 66, 0.22);
}

.builder-templates-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.builder-templates-head-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.builder-templates-kicker {
    color: #5a7c89;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

.builder-templates-meta {
    color: #335766;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 2px;
}

.builder-templates-search-row {
    display: block;
}

.builder-templates-search {
    width: 100%;
    border: 1px solid rgba(115, 149, 164, 0.65);
    border-radius: 8px;
    padding: 8px 9px;
    font-size: 12px;
    background: #f8fcff;
    color: #1a4656;
    outline: none;
}

.builder-templates-search:focus {
    border-color: rgba(14, 159, 136, 0.82);
    box-shadow: 0 0 0 3px rgba(14, 159, 136, 0.14);
}

.builder-templates-list {
    display: grid;
    gap: 12px;
}

.builder-templates-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(176, 198, 209, 0.72);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.84);
}

.builder-templates-context-text {
    font-size: 12px;
    color: #315564;
    line-height: 1.35;
}

.builder-template-group {
    display: grid;
    gap: 8px;
}

.builder-template-group + .builder-template-group {
    padding-top: 10px;
    border-top: 1px solid rgba(182, 204, 214, 0.65);
}

.builder-template-group-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5e7f8d;
    font-weight: 700;
}

.builder-template-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.builder-template-card-wrap {
    position: relative;
    min-width: 0;
}

.builder-template-card {
    width: 100%;
    border: 1px solid rgba(161, 188, 200, 0.72);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 247, 251, 0.96) 100%);
    padding: 10px 12px 10px 10px;
    text-align: left;
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    cursor: pointer;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.builder-template-card:hover {
    transform: translateY(-1px);
    border-color: rgba(14, 159, 136, 0.5);
    box-shadow: 0 8px 16px rgba(18, 49, 63, 0.12);
}

.builder-template-card.is-highlighted {
    border-color: rgba(14, 159, 136, 0.78);
    box-shadow: 0 0 0 3px rgba(14, 159, 136, 0.14);
}

.builder-template-delete {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 1;
    min-width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 999px;
}

.builder-template-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(160, 188, 201, 0.72);
    background:
        linear-gradient(180deg, rgba(248, 252, 255, 0.95) 0%, rgba(229, 240, 247, 0.94) 100%),
        linear-gradient(90deg, rgba(173, 197, 208, 0.18) 1px, transparent 1px),
        linear-gradient(0deg, rgba(173, 197, 208, 0.18) 1px, transparent 1px);
    background-size: auto, 16px 16px, 16px 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.builder-template-thumb.is-wide {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.builder-template-card-body {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.builder-template-thumb-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.builder-template-thumb-line {
    fill: none;
    stroke: rgba(45, 118, 170, 0.7);
    stroke-width: 1.4;
    stroke-linecap: round;
}

.builder-template-thumb-node {
    position: absolute;
    width: var(--builder-thumb-node-width, 21%);
    height: var(--builder-thumb-node-height, 13%);
    min-width: 22px;
    min-height: 14px;
    border-radius: 9px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 10px rgba(17, 39, 56, 0.12);
}

.builder-template-thumb.is-wide {
    --builder-thumb-node-width: 13%;
    --builder-thumb-node-height: 12%;
}

.builder-template-thumb-node.is-input {
    background: linear-gradient(180deg, rgba(26, 97, 87, 0.96) 0%, rgba(20, 72, 65, 0.96) 100%);
}

.builder-template-thumb-node.is-flow {
    background: linear-gradient(180deg, rgba(28, 79, 119, 0.96) 0%, rgba(20, 57, 92, 0.96) 100%);
}

.builder-template-thumb-node.is-package {
    background: linear-gradient(180deg, rgba(95, 84, 29, 0.96) 0%, rgba(73, 64, 22, 0.96) 100%);
}

.builder-template-thumb-node.is-end {
    background: linear-gradient(180deg, rgba(78, 66, 110, 0.96) 0%, rgba(53, 43, 80, 0.96) 100%);
}

.builder-template-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1f4558;
    line-height: 1.25;
    min-width: 0;
    word-break: break-word;
}

.builder-template-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.builder-template-scope {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.builder-template-scope.is-snippet {
    color: #1b5e53;
    background: rgba(14, 159, 136, 0.12);
}

.builder-template-scope.is-flow {
    color: #1e5373;
    background: rgba(35, 127, 201, 0.12);
}

.builder-template-visibility-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: #6b4b15;
    background: rgba(255, 216, 132, 0.28);
}

.builder-template-visibility-badge.is-public {
    color: #1b5e53;
    background: rgba(14, 159, 136, 0.12);
}

.builder-template-visibility-badge.is-admin {
    color: #6b4b15;
    background: rgba(255, 216, 132, 0.28);
}

.builder-template-meta-line {
    display: block;
    font-size: 11px;
    color: #62808d;
    line-height: 1.3;
}

.builder-template-description {
    display: block;
    font-size: 11px;
    color: #4e6976;
    line-height: 1.35;
    overflow: hidden;
}

.builder-template-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.builder-template-actions .tiny-btn {
    min-height: 28px;
}

.builder-template-empty {
    border: 1px dashed rgba(140, 168, 181, 0.7);
    border-radius: 12px;
    padding: 12px;
    font-size: 12px;
    color: #587684;
    background: rgba(237, 246, 250, 0.7);
}

.builder-template-save-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.builder-flow-name {
    border-radius: 8px;
    border: 1px solid rgba(126, 159, 173, 0.6);
    background: rgba(228, 240, 247, 0.85);
    color: #1f4d5d;
    font-size: 12px;
    padding: 7px 10px;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.builder-flow-name:hover {
    border-color: rgba(76, 123, 145, 0.8);
    background: rgba(220, 236, 245, 0.95);
}

.builder-zoom-controls {
    position: absolute;
    left: calc(10px + var(--builder-ai-hud-offset));
    bottom: 10px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    border-radius: 10px;
    background: rgba(245, 252, 255, 0.92);
    border: 1px solid rgba(140, 168, 181, 0.5);
    backdrop-filter: blur(4px);
    transition: left 180ms ease;
}

.builder-zoom-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid rgba(113, 146, 161, 0.7);
    background: linear-gradient(180deg, #edf6fb 0%, #d9e9f2 100%);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.builder-zoom-btn:hover {
    border-color: rgba(70, 118, 141, 0.85);
}

.builder-zoom-btn svg {
    width: 16px;
    height: 16px;
    stroke: #2f5f74;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.builder-stage {
    position: relative;
    width: 1800px;
    height: 1100px;
}

.builder-canvas {
    position: relative;
    width: 1800px;
    height: 1100px;
    min-width: 1800px;
    min-height: 1100px;
}

.builder-connections {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    overflow: visible;
}

.builder-nodes-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.builder-line {
    fill: none;
    stroke: var(--builder-line-color, #3f758f);
    stroke-width: 2;
    opacity: 0.92;
    transition: stroke 140ms ease, stroke-width 140ms ease, opacity 140ms ease, filter 140ms ease;
}

.builder-line:hover {
    stroke-width: 3;
    opacity: 1;
}

.builder-line-hit {
    fill: none;
    stroke: rgba(0, 0, 0, 0);
    stroke-width: 14;
    cursor: pointer;
    pointer-events: stroke;
}

.builder-line-bridge-hit {
    stroke-width: 18;
}

.builder-line-setting {
    stroke: var(--builder-line-color, #3ac1b0);
    stroke-dasharray: 6 5;
    opacity: 0.96;
}

.builder-line-bridge-underlay,
.builder-line-bridge {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.builder-line-bridge-underlay {
    stroke: rgba(241, 248, 250, 0.96);
    stroke-width: 6.5;
    opacity: 0.96;
    pointer-events: none;
}

.builder-line-bridge {
    stroke: var(--builder-line-color, #3f758f);
    stroke-width: 2.4;
    opacity: 0.98;
    cursor: pointer;
    pointer-events: stroke;
}

.builder-line-bridge.is-selected {
    stroke: #ffd45d;
    stroke-width: 3.6;
    filter: drop-shadow(0 0 5px rgba(255, 212, 93, 0.28));
}

.builder-line-temp {
    stroke-dasharray: 7 6;
    stroke: #0e9f88;
    pointer-events: none;
}

.builder-line.is-selected {
    stroke: #ffd45d;
    stroke-width: 4;
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(255, 212, 93, 0.34));
}

.builder-line-hit.is-selected {
    stroke-width: 16;
}

.builder-node.has-connection-selected {
    box-shadow: 0 0 0 1px rgba(255, 213, 92, 0.22), 0 14px 28px rgba(7, 21, 29, 0.28);
}

.builder-node.is-connection-source {
    border-color: rgba(88, 226, 196, 0.82);
    box-shadow: 0 0 0 1px rgba(88, 226, 196, 0.22), 0 18px 34px rgba(11, 31, 39, 0.3);
}

.builder-node.is-connection-target {
    border-color: rgba(255, 213, 92, 0.86);
    box-shadow: 0 0 0 1px rgba(255, 213, 92, 0.26), 0 18px 34px rgba(11, 31, 39, 0.3);
}

.ghost-btn[disabled] {
    opacity: 0.52;
    cursor: not-allowed;
}

.builder-node {
    position: absolute;
    width: 280px;
    border-radius: 12px;
    background: linear-gradient(180deg, #1d2f3a 0%, #15242e 100%);
    border: 1px solid #2d4a5b;
    color: #e8f2f6;
    box-shadow: 0 10px 20px rgba(8, 25, 35, 0.26);
    user-select: none;
    pointer-events: auto;
}

.builder-node.is-selected {
    border-color: #57b8ff;
    box-shadow: 0 0 0 2px rgba(87, 184, 255, 0.42), 0 16px 28px rgba(13, 41, 57, 0.28);
}

.builder-node-input {
    border-color: #2b5646;
    background: linear-gradient(180deg, #1b352d 0%, #142821 100%);
    box-shadow: 0 12px 24px rgba(8, 32, 24, 0.24);
}

.builder-node-input.is-selected {
    border-color: #71d4a0;
    box-shadow: 0 0 0 2px rgba(113, 212, 160, 0.34), 0 18px 30px rgba(8, 32, 24, 0.26);
}

.builder-node-input .builder-node-header {
    border-bottom-color: rgba(166, 221, 195, 0.16);
}

.builder-node-input .builder-port-label {
    color: #d6e8df;
}

.builder-node-package {
    border-color: #7a5c42;
    background: linear-gradient(180deg, #3b3127 0%, #2b231c 100%);
    box-shadow: 0 14px 24px rgba(56, 38, 20, 0.24);
}

.builder-node-package .builder-node-header {
    border-bottom-color: rgba(227, 193, 145, 0.19);
}

.builder-node-package .builder-port-label {
    color: #f0e4d7;
}

.builder-node-package.is-selected {
    border-color: #e4b06d;
    box-shadow: 0 0 0 2px rgba(228, 176, 109, 0.34), 0 18px 30px rgba(56, 38, 20, 0.26);
}

.builder-node-end {
    border-color: #6c627f;
    background: linear-gradient(180deg, #393340 0%, #2b2531 100%);
    box-shadow: 0 14px 24px rgba(44, 30, 58, 0.22);
}

.builder-node-end .builder-node-header {
    border-bottom-color: rgba(198, 186, 224, 0.2);
}

.builder-node-end .builder-port-label {
    color: #eee7f8;
}

.builder-node-end.is-selected {
    border-color: #c7b8ef;
    box-shadow: 0 0 0 2px rgba(199, 184, 239, 0.32), 0 18px 30px rgba(44, 30, 58, 0.24);
}

.builder-node-flow-cutter {
    border-color: #9b7700;
    background:
        linear-gradient(180deg, rgba(255, 230, 128, 0.96) 0%, rgba(232, 185, 46, 0.98) 100%),
        repeating-linear-gradient(-45deg, rgba(34, 28, 8, 0.12) 0 10px, rgba(255, 232, 162, 0.08) 10px 20px);
    color: #2e2300;
    box-shadow: 0 14px 28px rgba(110, 76, 0, 0.22);
    overflow: hidden;
}

.builder-node-flow-cutter::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    border-radius: 12px 12px 0 0;
    background: repeating-linear-gradient(-45deg, #18120a 0 10px, #f8c52a 10px 20px);
}

.builder-node-header {
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid rgba(171, 208, 224, 0.18);
    cursor: grab;
}

.builder-node-flow-cutter .builder-node-header {
    border-bottom-color: rgba(81, 58, 0, 0.18);
    padding-top: 13px;
}

.builder-node-header:active {
    cursor: grabbing;
}

.builder-node-title {
    font-size: 13px;
    font-weight: 600;
    color: #f4fbff;
    letter-spacing: 0.01em;
}

.builder-node-flow-cutter .builder-node-title {
    color: #241700;
    text-shadow: 0 1px 0 rgba(255, 248, 221, 0.46);
}

.builder-node-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.builder-node-beta-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(32, 24, 8, 0.26);
    background: #1e1710;
    color: #ffd85f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.builder-node-remove {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-radius: 8px;
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

.builder-node-remove:hover {
    background: rgba(203, 91, 79, 0.28);
    border-color: rgba(203, 91, 79, 0.8);
}

.builder-node-flow-cutter .builder-node-remove {
    border-color: rgba(40, 28, 0, 0.32);
    background: rgba(39, 28, 6, 0.08);
    color: #342500;
}

.builder-node-flow-cutter .builder-node-remove:hover {
    background: rgba(99, 46, 18, 0.16);
    border-color: rgba(117, 49, 22, 0.46);
}

.builder-node-body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.builder-node-flow-cutter .builder-node-body {
    background: linear-gradient(180deg, rgba(255, 244, 199, 0.4) 0%, rgba(255, 231, 146, 0.18) 100%);
}

.builder-node-ports {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.builder-port-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.builder-port-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
}

.builder-port-row.is-connection-selected .builder-port-label {
    color: #f4fbff;
    font-weight: 700;
}

.builder-port-row.setting .builder-port-label {
    color: #8edfd2;
}

.builder-node-flow-cutter .builder-port-row.setting .builder-port-label {
    color: #6f5200;
}

.builder-port-row.setting .builder-port-dot {
    background: #39bca8;
    border-color: rgba(224, 247, 243, 0.94);
}

.builder-port-row.output {
    justify-content: flex-end;
}

.builder-port-label {
    font-size: 11px;
    color: #c8d8df;
    line-height: 1.2;
}

.builder-node-flow-cutter .builder-port-label {
    color: #574100;
}

.builder-port-dot {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    border: 2px solid rgba(232, 245, 249, 0.88);
    background: #647985;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.builder-port-dot[data-direction="output"] {
    background: #647985;
}

.builder-node-input .builder-port-dot[data-direction="output"] {
    background: #2c7b58;
    border-color: rgba(227, 247, 238, 0.84);
}

.builder-node-flow-cutter .builder-port-dot {
    border-color: rgba(60, 44, 0, 0.8);
    background: #6b5b2b;
}

.builder-node-flow-cutter .builder-port-dot[data-direction="output"] {
    background: #5f583e;
}

.builder-port-dot.connect-from {
    box-shadow: 0 0 0 3px rgba(32, 168, 145, 0.26);
}

.builder-node-input .builder-port-dot.connect-from,
.builder-node-input .builder-port-dot[data-direction="output"].is-connected {
    background: #45cf82;
    border-color: rgba(237, 255, 245, 0.96);
    box-shadow: 0 0 0 3px rgba(69, 207, 130, 0.18);
}

.builder-port-dot.is-required {
    background: #647985;
}

.builder-port-dot.is-optional {
    background: #8a7038;
}

.builder-port-dot.is-connected {
    background: #38c976;
}

.builder-port-dot.is-idle {
    background: #647985;
}

.builder-port-dot.is-connectable {
    background: #2d8f61;
    border-color: rgba(231, 250, 239, 0.94);
    box-shadow: 0 0 0 3px rgba(45, 143, 97, 0.18);
    transform: scale(1.04);
}

.builder-port-dot.is-optional.is-connectable {
    background: #b38a43;
    border-color: rgba(255, 239, 206, 0.92);
    box-shadow: 0 0 0 3px rgba(179, 138, 67, 0.14);
}

.builder-port-dot.is-connected.is-connectable {
    background: #57df93;
}

.builder-port-dot.is-incompatible {
    background: #c7544f;
    border-color: rgba(255, 231, 231, 0.9);
    box-shadow: 0 0 0 3px rgba(199, 84, 79, 0.18);
    opacity: 1;
}

.builder-port-dot.is-connection-selected {
    transform: scale(1.16);
}

.builder-port-dot.is-connection-source {
    background: #45d7b2;
    border-color: rgba(229, 255, 248, 0.96);
    box-shadow: 0 0 0 4px rgba(69, 215, 178, 0.18);
}

.builder-port-dot.is-connection-target {
    background: #ffd45d;
    border-color: rgba(255, 248, 220, 0.96);
    box-shadow: 0 0 0 4px rgba(255, 212, 93, 0.18);
}

.builder-settings {
    border-top: 1px solid rgba(171, 208, 224, 0.14);
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(420px, calc(100vh - 260px));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 4px;
}

.builder-node-flow-cutter .builder-settings {
    border-top-color: rgba(89, 65, 0, 0.18);
}

.builder-settings::-webkit-scrollbar {
    width: 8px;
}

.builder-settings::-webkit-scrollbar-track {
    background: rgba(11, 23, 30, 0.22);
    border-radius: 999px;
}

.builder-settings::-webkit-scrollbar-thumb {
    background: rgba(108, 152, 172, 0.62);
    border-radius: 999px;
}

.builder-settings::-webkit-scrollbar-thumb:hover {
    background: rgba(132, 181, 203, 0.78);
}

.builder-node-flow-cutter .builder-settings::-webkit-scrollbar-track {
    background: rgba(74, 53, 0, 0.14);
}

.builder-node-flow-cutter .builder-settings::-webkit-scrollbar-thumb {
    background: rgba(120, 92, 0, 0.48);
}

.builder-node-flow-cutter .builder-settings::-webkit-scrollbar-thumb:hover {
    background: rgba(144, 109, 0, 0.64);
}

.builder-setting-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.builder-setting-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #c0d6df;
}

.builder-setting-section-label {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8fb2c2;
}

.builder-setting-row.is-admin-only {
    padding: 8px 9px;
    border: 1px solid rgba(215, 185, 104, 0.26);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 244, 214, 0.12), rgba(255, 244, 214, 0.05)),
        rgba(244, 251, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 248, 228, 0.08);
}

.builder-admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(221, 187, 102, 0.42);
    background: rgba(236, 201, 118, 0.16);
    color: #f6d88d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.builder-setting-hint {
    font-size: 11px;
    line-height: 1.35;
    color: #8fa8b4;
}

.builder-advanced-toggle-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.builder-advanced-toggle-btn.is-open {
    background: rgba(243, 248, 250, 0.12);
    border-color: rgba(214, 229, 235, 0.35);
    color: #f3f8fa;
}

.builder-advanced-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
}

.builder-asset-selection-summary {
    font-size: 11px;
    line-height: 1.4;
    color: #b9d2dc;
    border: 1px solid rgba(171, 208, 224, 0.18);
    background: rgba(244, 251, 255, 0.06);
    border-radius: 8px;
    padding: 7px 8px;
}

.builder-pipeline-prompt-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 9px;
    border-radius: 10px;
    border: 1px solid rgba(157, 212, 230, 0.2);
    background:
        linear-gradient(180deg, rgba(244, 251, 255, 0.08), rgba(244, 251, 255, 0.04)),
        rgba(11, 28, 35, 0.34);
}

.builder-pipeline-prompt-meta {
    font-size: 11px;
    line-height: 1.35;
    color: #d6ebf3;
}

.builder-inline-status {
    min-height: 18px;
    font-size: 11px;
    line-height: 1.35;
    color: #aac6d1;
}

.builder-inline-status.is-saving {
    color: #f0d27b;
}

.builder-inline-status.is-success {
    color: #9ad6aa;
}

.builder-inline-status.is-error {
    color: #ff9a9a;
}

.builder-node-flow-cutter .builder-setting-row label {
    color: #564000;
}

.builder-node-flow-cutter .builder-setting-hint {
    color: #6e5600;
}

.builder-setting-row input[type="text"],
.builder-setting-row input[type="number"],
.builder-setting-row textarea {
    width: 100%;
    border: 1px solid rgba(173, 210, 224, 0.34);
    background: rgba(244, 251, 255, 0.12);
    color: #eef8fc;
    border-radius: 8px;
    padding: 5px 7px;
    font-size: 12px;
    line-height: 1.35;
}

.builder-node-flow-cutter .builder-setting-row input[type="text"],
.builder-node-flow-cutter .builder-setting-row input[type="number"],
.builder-node-flow-cutter .builder-setting-row textarea {
    border-color: rgba(126, 96, 0, 0.28);
    background: rgba(255, 252, 244, 0.86);
    color: #2f2500;
}

.builder-setting-row textarea {
    resize: none;
    overflow-y: hidden;
}

.builder-setting-row select {
    width: 100%;
    border: 1px solid rgba(173, 210, 224, 0.55);
    background: #f2f8fb;
    color: #173d4d;
    border-radius: 8px;
    padding: 5px 7px;
    font-size: 12px;
}

.builder-setting-row select:focus {
    outline: none;
    border-color: rgba(14, 159, 136, 0.82);
    box-shadow: 0 0 0 3px rgba(14, 159, 136, 0.14);
}

.builder-setting-row select option {
    background: #ffffff;
    color: #173d4d;
}

.builder-node-flow-cutter .builder-setting-row select {
    border-color: rgba(126, 96, 0, 0.36);
    background: #fff8df;
    color: #2d2400;
}

.builder-node-flow-cutter .builder-setting-row select option {
    background: #fff9e7;
    color: #2d2400;
}

.builder-setting-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.builder-setting-input-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    align-items: center;
}

.flow-labels-preview-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: -2px;
}

.flow-labels-preview-title {
    font-size: 11px;
    font-weight: 700;
    color: #eef8fc;
}

.flow-labels-preview-stage {
    --flow-labels-preview-scale: 1;
    --flow-labels-preview-safe-offset: 18px;
    position: relative;
    min-height: 92px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(158, 210, 227, 0.18);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 36%),
        linear-gradient(135deg, rgba(13, 44, 57, 0.98), rgba(21, 63, 80, 0.92));
}

.flow-labels-preview-stage.mode-mittig_oben,
.flow-labels-preview-stage.mode-tiktok_kommentar {
    min-height: 108px;
}

.flow-labels-preview-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: 0.3;
    pointer-events: none;
}

.flow-labels-preview-meta {
    font-size: 10px;
    line-height: 1.3;
    color: #a8c3cf;
}

.flow-labels-preview-badge {
    position: absolute;
    z-index: 1;
    max-width: 74%;
    padding: calc(5px * var(--flow-labels-preview-scale)) calc(9px * var(--flow-labels-preview-scale));
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #173d4d;
    font-size: calc(11px * var(--flow-labels-preview-scale));
    font-weight: 700;
    line-height: 1.1;
    box-shadow: 0 calc(8px * var(--flow-labels-preview-scale)) calc(18px * var(--flow-labels-preview-scale)) rgba(0, 0, 0, 0.24);
}

.flow-labels-preview-badge.sticker {
    transform-origin: center center;
}

.flow-labels-preview-badge.textbox {
    left: 50%;
    right: auto;
    bottom: 10px;
    max-width: calc(100% - 18px);
    border-radius: 12px;
    transform: translateX(-50%);
    text-align: center;
}

.flow-labels-preview-textbox,
.flow-labels-preview-comment {
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
}

.flow-labels-preview-textbox.pos-top_center,
.flow-labels-preview-comment.pos-top_center {
    top: var(--flow-labels-preview-safe-offset);
}

.flow-labels-preview-textbox.pos-bottom_center {
    bottom: var(--flow-labels-preview-safe-offset);
}

.flow-labels-preview-textbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(1px * var(--flow-labels-preview-scale));
    max-width: calc(100% - 18px);
}

.flow-labels-preview-textbox-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(26px * var(--flow-labels-preview-scale));
    padding: calc(4.5px * var(--flow-labels-preview-scale)) calc(12px * var(--flow-labels-preview-scale));
    border-radius: calc(14px * var(--flow-labels-preview-scale));
    background: rgba(255, 255, 255, 0.98);
    color: #101820;
    font-size: calc(11px * var(--flow-labels-preview-scale));
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    box-shadow: 0 calc(10px * var(--flow-labels-preview-scale)) calc(20px * var(--flow-labels-preview-scale)) rgba(0, 0, 0, 0.18);
}

.flow-labels-preview-textbox-line + .flow-labels-preview-textbox-line {
    margin-top: calc(-6px * var(--flow-labels-preview-scale));
}

.flow-labels-preview-comment {
    width: min(calc(224px * var(--flow-labels-preview-scale)), calc(100% - 18px));
    padding: calc(8px * var(--flow-labels-preview-scale)) calc(10px * var(--flow-labels-preview-scale)) calc(9px * var(--flow-labels-preview-scale));
    border-radius: calc(14px * var(--flow-labels-preview-scale));
    background: rgba(255, 255, 255, 0.97);
    color: #11181d;
    box-shadow: 0 calc(12px * var(--flow-labels-preview-scale)) calc(26px * var(--flow-labels-preview-scale)) rgba(0, 0, 0, 0.22);
}

.flow-labels-preview-comment::after {
    content: "";
    position: absolute;
    left: calc(18px * var(--flow-labels-preview-scale));
    bottom: calc(-6px * var(--flow-labels-preview-scale));
    width: calc(12px * var(--flow-labels-preview-scale));
    height: calc(12px * var(--flow-labels-preview-scale));
    border-radius: 0 0 0 4px;
    background: rgba(255, 255, 255, 0.97);
    transform: rotate(45deg);
}

.flow-labels-preview-comment-header {
    display: flex;
    align-items: center;
    gap: calc(7px * var(--flow-labels-preview-scale));
}

.flow-labels-preview-comment-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(18px * var(--flow-labels-preview-scale));
    height: calc(18px * var(--flow-labels-preview-scale));
    border-radius: 999px;
    background: linear-gradient(135deg, #7b8cff, #5d72ff);
    color: #ffffff;
    font-size: calc(8.8px * var(--flow-labels-preview-scale));
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.flow-labels-preview-comment-name {
    font-size: calc(9px * var(--flow-labels-preview-scale));
    font-weight: 700;
    color: #7a848a;
    letter-spacing: 0.01em;
}

.flow-labels-preview-comment-body {
    display: flex;
    flex-direction: column;
    gap: calc(1px * var(--flow-labels-preview-scale));
    margin-top: calc(5px * var(--flow-labels-preview-scale));
}

.flow-labels-preview-comment-line {
    font-size: calc(11px * var(--flow-labels-preview-scale));
    font-weight: 700;
    line-height: 1.12;
    color: #11181d;
}

.flow-labels-preview-badge.pos-top_left {
    top: 10px;
    left: 10px;
}

.flow-labels-preview-badge.pos-top_right {
    top: 10px;
    right: 10px;
}

.flow-labels-preview-badge.pos-top_center {
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
}

.flow-labels-preview-badge.pos-bottom_left {
    left: 10px;
    bottom: 10px;
}

.flow-labels-preview-badge.pos-bottom_right {
    right: 10px;
    bottom: 10px;
}

.flow-labels-preview-badge.pos-bottom_center {
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
}

.splitscreen-preview-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
}

.splitscreen-preview-title {
    font-size: 11px;
    font-weight: 700;
    color: #eef8fc;
}

.splitscreen-preview-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(100%, 210px);
    aspect-ratio: 1 / 1;
    min-height: 0;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(158, 210, 227, 0.18);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 34%),
        linear-gradient(145deg, rgba(11, 38, 50, 0.96), rgba(18, 56, 70, 0.92));
}

.splitscreen-preview-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #eef8fc;
}

.splitscreen-preview-panel span {
    position: relative;
    z-index: 1;
}

.splitscreen-preview-panel.is-ad {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
        linear-gradient(135deg, rgba(230, 170, 78, 0.86), rgba(181, 108, 31, 0.92));
}

.splitscreen-preview-panel.is-ad::after {
    content: "";
    position: absolute;
    inset: 14px 10px;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.34);
}

.splitscreen-preview-panel.is-video {
    background:
        linear-gradient(180deg, rgba(8, 16, 21, 0.06), rgba(8, 16, 21, 0.22)),
        linear-gradient(135deg, rgba(66, 130, 158, 0.42), rgba(23, 64, 82, 0.86));
}

.splitscreen-preview-panel.is-video::before {
    content: "";
    position: absolute;
    inset: 14px 10px;
    border-radius: 8px;
    border: 1px solid rgba(210, 235, 244, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(16, 30, 37, 0.24), rgba(16, 30, 37, 0.02));
}

.splitscreen-preview-button {
    position: absolute;
    left: 75%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 78px;
    min-height: 42px;
    padding: 7px 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    color: #173d4d;
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
    font-weight: 700;
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22);
}

.builder-setting-anchor {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    border: 2px solid rgba(232, 245, 249, 0.92);
    background: #3bbfae;
    padding: 0;
    cursor: pointer;
    box-shadow: none;
}

.builder-setting-anchor:hover {
    border-color: rgba(245, 252, 255, 0.98);
}

.builder-setting-anchor.connected {
    box-shadow: 0 0 0 3px rgba(58, 193, 176, 0.24);
}

.builder-node-flow-cutter .builder-setting-anchor {
    border-color: rgba(56, 41, 0, 0.78);
    background: #1f1810;
}

.builder-setting-anchor.idle-hidden {
    opacity: 0;
    width: 0;
    height: 0;
    border-width: 0;
    pointer-events: none;
}

.builder-direct-upload {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
}

.builder-direct-pick-btn {
    padding: 6px 9px;
    font-size: 12px;
}

.builder-direct-file-name {
    display: block;
    min-height: 30px;
    border: 1px solid rgba(173, 210, 224, 0.35);
    background: rgba(244, 251, 255, 0.12);
    color: #d9edf6;
    border-radius: 8px;
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.builder-node-flow-cutter .builder-direct-file-name {
    border-color: rgba(126, 96, 0, 0.28);
    background: rgba(255, 252, 244, 0.72);
    color: #403000;
}

.builder-direct-upload-btn {
    padding: 6px 9px;
    font-size: 12px;
    box-shadow: none;
}

.builder-direct-upload-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.builder-context {
    position: fixed;
    z-index: 30;
    width: min(310px, calc(100vw - 24px));
    min-width: 220px;
    max-width: 310px;
    max-height: min(60vh, 520px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 171, 188, 0.7) transparent;
    background: #12242d;
    border: 1px solid rgba(171, 208, 224, 0.3);
    border-radius: 12px;
    box-shadow: 0 18px 30px rgba(10, 32, 44, 0.32);
    padding: 6px;
}

.builder-context::-webkit-scrollbar {
    width: 8px;
}

.builder-context::-webkit-scrollbar-thumb {
    background: rgba(120, 171, 188, 0.7);
    border-radius: 999px;
}

.builder-context-search-wrap {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: -6px -6px 6px;
    padding: 6px;
    background: #12242d;
    border-bottom: 1px solid rgba(171, 208, 224, 0.2);
}

.builder-context-search {
    width: 100%;
    border: 1px solid rgba(171, 208, 224, 0.45);
    background: rgba(244, 251, 255, 0.1);
    color: #ebf8ff;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 12px;
    outline: none;
}

.builder-context-search:focus {
    border-color: rgba(14, 159, 136, 0.8);
    box-shadow: 0 0 0 3px rgba(14, 159, 136, 0.14);
}

.builder-context-group + .builder-context-group {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(171, 208, 224, 0.18);
}

.builder-context-title {
    color: #9cc3d2;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
}

.builder-context-item {
    width: 100%;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.03);
    color: #e9f4f8;
    border-radius: 10px;
    padding: 6px 8px;
    text-align: left;
    cursor: pointer;
    font-size: 12px;
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.builder-context-item:hover {
    border-color: rgba(14, 159, 136, 0.6);
    background: rgba(14, 159, 136, 0.18);
}

.builder-context-item.is-danger:hover {
    border-color: rgba(239, 103, 85, 0.68);
    background: rgba(239, 103, 85, 0.14);
}

.builder-context-item-title {
    font-weight: 700;
    line-height: 1.25;
}

.builder-context-item-meta {
    width: 100%;
    color: #8fb1be;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 720px) {
    .builder-template-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .builder-templates-head {
        align-items: stretch;
        flex-direction: column;
    }
}

.timeline-admin-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.timeline-hero-card {
    position: relative;
    overflow: hidden;
    padding: 18px;
    background:
        radial-gradient(circle at top right, rgba(14, 159, 136, 0.16) 0%, transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 250, 252, 0.98) 100%);
}

.timeline-hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 48%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.timeline-admin-head > * {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.timeline-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.timeline-server-status {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 700;
    max-width: 58ch;
    line-height: 1.45;
}

.timeline-server-status.online {
    color: #0f7b4d;
}

.timeline-server-status.warning {
    color: #b25d09;
}

.timeline-server-status.error {
    color: #b44338;
}

.timeline-server-status.unknown {
    color: var(--text-muted);
}

.timeline-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.timeline-stat {
    border: 1px solid rgba(145, 177, 193, 0.35);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    min-height: 86px;
    box-shadow: 0 10px 22px rgba(12, 39, 54, 0.05);
}

.timeline-stat span {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.timeline-stat strong {
    font-size: clamp(24px, 2vw, 30px);
    line-height: 1;
}

.timeline-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(320px, 0.95fr);
    gap: 16px;
    align-items: start;
}

.timeline-grid > * {
    min-width: 0;
}

.timeline-side-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
    align-content: start;
}

.timeline-main-card,
.timeline-side-card {
    min-width: 0;
    margin-bottom: 0;
}

.timeline-table-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.timeline-table-head h3 {
    margin: 0;
}

.timeline-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.timeline-table-wrap {
    border: 1px solid rgba(151, 188, 205, 0.35);
    border-radius: 12px;
    max-height: 62vh;
    overflow: auto;
    width: 100%;
    min-width: 0;
    scrollbar-gutter: stable both-edges;
    background: linear-gradient(180deg, rgba(247, 251, 253, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.timeline-workers-wrap {
    max-height: min(36vh, 460px);
}

.timeline-worker-keys-wrap {
    max-height: min(34vh, 420px);
}

.timeline-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 0.8fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.timeline-form-row-keys {
    grid-template-columns: minmax(0, 1fr) auto;
}

.timeline-form-row-worker-priority {
    grid-template-columns: minmax(0, 1.5fr) minmax(90px, 120px) auto;
}

.timeline-inline-label {
    font-size: 12px;
    color: var(--text-muted);
}

.timeline-help {
    margin-top: 0;
    margin-bottom: 8px;
}

.timeline-key-flash {
    border: 1px solid rgba(14, 159, 136, 0.38);
    background: #eefaf6;
    color: #194839;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    margin-bottom: 8px;
    display: grid;
    gap: 6px;
}

.timeline-key-flash strong {
    font-size: 12px;
}

.timeline-key-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.timeline-key-value {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 11px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(37, 88, 70, 0.3);
    background: #f6fdf9;
    color: #11382d;
    word-break: break-all;
}

.timeline-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 12px;
    min-width: 100%;
}

.timeline-table-jobs {
    min-width: 980px;
}

.timeline-table-workers,
.timeline-table-keys {
    width: 100%;
    min-width: 720px;
}

.timeline-table-workers {
    min-width: 760px;
}

.timeline-table th,
.timeline-table td {
    border-bottom: 1px solid rgba(169, 201, 215, 0.28);
    padding: 8px 9px;
    text-align: left;
    vertical-align: top;
    word-break: normal;
    overflow-wrap: break-word;
}

.timeline-table th {
    position: sticky;
    top: 0;
    background: #f2f8fb;
    color: #4d6774;
    z-index: 1;
    font-size: 11px;
    text-transform: uppercase;
    white-space: nowrap;
}

.timeline-table-jobs th:nth-child(1),
.timeline-table-jobs td:nth-child(1) {
    min-width: 260px;
}

.timeline-table-jobs th:nth-child(2),
.timeline-table-jobs td:nth-child(2) {
    min-width: 110px;
}

.timeline-table-jobs th:nth-child(6),
.timeline-table-jobs td:nth-child(6) {
    min-width: 170px;
}

.timeline-table-jobs th:nth-child(7),
.timeline-table-jobs td:nth-child(7) {
    min-width: 160px;
}

.timeline-table-jobs th:nth-child(8),
.timeline-table-jobs td:nth-child(8) {
    min-width: 206px;
}

.timeline-table-workers th:nth-child(1),
.timeline-table-workers td:nth-child(1) {
    min-width: 230px;
}

.timeline-table-workers th:nth-child(6),
.timeline-table-workers td:nth-child(6) {
    min-width: 138px;
}

.timeline-table-workers th:nth-child(7),
.timeline-table-workers td:nth-child(7),
.timeline-table-keys th:nth-child(6),
.timeline-table-keys td:nth-child(6) {
    min-width: 110px;
}

.timeline-table-keys th:nth-child(1),
.timeline-table-keys td:nth-child(1) {
    min-width: 190px;
}

.timeline-table-keys th:nth-child(3),
.timeline-table-keys td:nth-child(3) {
    min-width: 200px;
}

.timeline-table-keys th:nth-child(5),
.timeline-table-keys td:nth-child(5) {
    min-width: 140px;
}

.timeline-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid transparent;
}

.timeline-status.pending {
    color: #9a5a05;
    background: #fff6e7;
    border-color: rgba(154, 90, 5, 0.18);
}

.timeline-status.open,
.timeline-status.unknown,
.timeline-status.missing {
    color: #5a6470;
    background: #f2f5f8;
    border-color: rgba(90, 100, 112, 0.18);
}

.timeline-status.running {
    color: #1961b2;
    background: #edf5ff;
    border-color: rgba(25, 97, 178, 0.18);
}

.timeline-status.completed {
    color: #0f7b4d;
    background: #eafbf2;
    border-color: rgba(15, 123, 77, 0.18);
}

.timeline-status.active {
    color: #0f7b4d;
    background: #eafbf2;
    border-color: rgba(15, 123, 77, 0.18);
}

.timeline-status.failed,
.timeline-status.cancelled,
.timeline-status.revoked {
    color: #b44338;
    background: #fff0ef;
    border-color: rgba(180, 67, 56, 0.18);
}

.timeline-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    min-width: max-content;
}

.timeline-actions .tiny-btn {
    padding: 4px 8px;
    white-space: nowrap;
}

.timeline-actions-cell {
    white-space: nowrap;
    word-break: normal;
}

.timeline-actions-inline {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
}

.admin-report-category-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: #edf5ff;
    color: #1d63b0;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid rgba(29, 99, 176, 0.18);
}

.admin-report-state {
    display: block;
    margin-top: 6px;
}

.admin-report-description {
    display: inline-block;
    max-width: 100%;
    line-height: 1.4;
}

.admin-report-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.timeline-actions-inline .tiny-btn {
    padding: 4px 9px;
    white-space: nowrap;
}

.timeline-table-workers .timeline-actions-inline .tiny-btn,
.timeline-table-keys .timeline-actions-inline .tiny-btn {
    min-width: 84px;
    text-align: center;
}

.timeline-job-id {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

.timeline-worker-name {
    display: block;
    line-height: 1.35;
}

.timeline-worker-pref-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.timeline-worker-pref-label {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.timeline-worker-pref-select {
    min-width: 96px;
    max-width: 100%;
    flex: 1 1 140px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(169, 201, 215, 0.8);
    background: #fff;
    color: var(--text-color);
    font-size: 12px;
}

.timeline-worker-pref-select:disabled {
    opacity: 0.65;
    cursor: wait;
}

.timeline-job-name {
    display: block;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.25;
    max-width: 30ch;
}

.timeline-job-meta {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.45;
}

.timeline-status-line {
    margin-top: 12px;
    margin-bottom: 0;
}

@media (max-width: 1480px) {
    .timeline-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .timeline-side-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1240px) {
    .timeline-side-stack {
        grid-template-columns: minmax(0, 1fr);
    }

    .timeline-head-actions {
        justify-content: flex-start;
    }

    .timeline-filters {
        justify-content: flex-start;
    }
}

.admin-dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-dashboard-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-view-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(72, 117, 142, 0.16);
    border-radius: 999px;
    background: rgba(242, 248, 251, 0.92);
}

.admin-view-switch-btn {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #406071;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.admin-view-switch-btn.is-active {
    background: linear-gradient(135deg, #0f9f88 0%, #138f7d 100%);
    color: #f7fffd;
    box-shadow: 0 10px 24px rgba(15, 159, 136, 0.24);
}

.admin-dashboard-head h2,
.admin-dashboard-note h3 {
    margin: 0;
}

.admin-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.admin-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.admin-summary-card {
    border: 1px solid rgba(72, 117, 142, 0.18);
    border-radius: 14px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fcfeff 0%, #f3f8fb 100%);
    box-shadow: var(--shadow-sm);
    display: grid;
    gap: 4px;
}

.admin-summary-card span {
    font-size: 12px;
    color: var(--text-muted);
}

.admin-summary-card strong {
    font-size: 30px;
    line-height: 1;
    color: #133444;
}

.admin-summary-card small {
    font-size: 11px;
    color: #607d8d;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 12px;
    align-items: start;
    margin-bottom: 12px;
}

.admin-management-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
}

.admin-user-layout {
    display: grid;
    gap: 10px;
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
}

.admin-user-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
}

.admin-dashboard-side {
    display: grid;
    gap: 8px;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
}

.admin-account-form {
    display: grid;
    gap: 8px;
}

#adminManagementPanel {
    display: grid;
    gap: 12px;
    max-width: 1340px;
    margin: 0 auto;
}

#adminManagementPanel .admin-management-shell {
    display: grid;
    gap: 12px;
    width: 100%;
}

#adminManagementPanel .admin-management-toolbar-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
}

#adminManagementPanel .admin-management-toolbar-copy {
    display: grid;
    gap: 4px;
}

#adminManagementPanel .admin-management-pane-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

#adminManagementPanel .admin-management-pane-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(72, 117, 142, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #27495b;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

#adminManagementPanel .admin-management-pane-tab strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(72, 117, 142, 0.12);
    font-size: 11px;
}

#adminManagementPanel .admin-management-pane-tab:hover,
#adminManagementPanel .admin-management-pane-tab:focus-visible {
    border-color: rgba(14, 159, 136, 0.34);
    box-shadow: 0 0 0 3px rgba(14, 159, 136, 0.12);
    outline: none;
}

#adminManagementPanel .admin-management-pane-tab.is-active {
    border-color: rgba(14, 159, 136, 0.42);
    background: linear-gradient(135deg, rgba(14, 159, 136, 0.18) 0%, rgba(14, 159, 136, 0.08) 100%);
    color: #0b6d60;
    box-shadow: 0 12px 32px rgba(14, 159, 136, 0.12);
}

#adminManagementPanel .admin-management-workspace,
#adminManagementPanel .admin-management-single-pane {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
}

#adminManagementPanel .admin-management-workspace {
    display: block;
}

#adminManagementPanel .admin-user-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    gap: 12px;
    align-items: start;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
}

#adminManagementPanel .admin-management-detail-column {
    display: grid;
    gap: 10px;
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 108px);
    overflow: auto;
    padding-right: 2px;
}

#adminManagementPanel .admin-management-list-card {
    min-width: 0;
}

#adminManagementPanel .admin-management-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#adminManagementPanel .admin-management-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

#adminManagementPanel .admin-management-head-actions p {
    margin: 0;
}

#adminManagementPanel .admin-management-search-wrap {
    width: min(320px, 100%);
}

#adminManagementPanel .admin-management-search-wrap .admin-table-search {
    width: 100%;
}

#adminManagementPanel .admin-management-table-wrap {
    max-height: clamp(360px, calc(100vh - 270px), 760px);
    overflow: auto;
}

#adminManagementPanel tr[data-user-id],
#adminManagementPanel tr[data-account-id],
#adminManagementPanel tr[data-template-id] {
    cursor: pointer;
}

#adminManagementPanel tr[data-user-id]:hover,
#adminManagementPanel tr[data-account-id]:hover,
#adminManagementPanel tr[data-template-id]:hover {
    background: rgba(14, 159, 136, 0.06);
}

#adminManagementPanel tr[data-template-id].is-selected {
    background: rgba(14, 159, 136, 0.1);
}

#adminManagementPanel .admin-template-name-cell {
    display: grid;
    gap: 4px;
}

#adminManagementPanel .admin-template-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
}

#adminManagementPanel .admin-template-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(72, 117, 142, 0.18);
    background: rgba(255, 255, 255, 0.78);
    color: #244556;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

#adminManagementPanel .admin-template-filter-btn strong {
    min-width: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(72, 117, 142, 0.12);
    color: #274d61;
    text-align: center;
    font-size: 0.9em;
}

#adminManagementPanel .admin-template-filter-btn:hover {
    border-color: rgba(14, 159, 136, 0.32);
    background: rgba(240, 251, 248, 0.92);
}

#adminManagementPanel .admin-template-filter-btn.is-active {
    border-color: rgba(14, 159, 136, 0.42);
    background: rgba(224, 248, 242, 0.98);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 6px 18px rgba(14, 159, 136, 0.12);
}

#adminManagementPanel .admin-template-order-cell {
    width: 88px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #3f6072;
}

#adminManagementPanel .admin-template-drag-handle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 54px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px dashed rgba(72, 117, 142, 0.28);
    background: rgba(244, 249, 251, 0.88);
    color: #5c7b8d;
    cursor: grab;
    font: inherit;
}

#adminManagementPanel .admin-template-drag-handle:active {
    cursor: grabbing;
}

#adminManagementPanel .admin-template-drag-grip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow:
        0 8px 0 currentColor,
        0 16px 0 currentColor,
        8px 0 0 currentColor,
        8px 8px 0 currentColor,
        8px 16px 0 currentColor;
    opacity: 0.9;
}

#adminManagementPanel .admin-template-order-number {
    min-width: 14px;
    text-align: right;
    font-size: 0.95em;
    font-weight: 700;
}

#adminManagementPanel .admin-template-row.is-draggable .admin-template-drag-handle:hover {
    border-color: rgba(14, 159, 136, 0.34);
    background: rgba(233, 249, 244, 0.96);
}

#adminManagementPanel .admin-template-row.is-dragging {
    opacity: 0.55;
}

#adminManagementPanel .admin-template-row.is-drop-before td {
    box-shadow: inset 0 3px 0 rgba(14, 159, 136, 0.34);
}

#adminManagementPanel .admin-template-row.is-drop-after td {
    box-shadow: inset 0 -3px 0 rgba(14, 159, 136, 0.34);
}

#adminManagementPanel .admin-template-note {
    display: grid;
    gap: 8px;
}

#adminManagementPanel .card {
    padding: 12px 13px;
}

#adminManagementPanel .timeline-table-head {
    margin-bottom: 10px;
}

.admin-edit-modal-card {
    width: min(760px, 100%);
    max-height: calc(100vh - 44px);
    overflow: auto;
}

.admin-edit-modal-inline-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#adminManagementPanel .timeline-table th,
#adminManagementPanel .timeline-table td {
    padding-top: 10px;
    padding-bottom: 10px;
}

#adminManagementPanel .field-label {
    margin-top: 7px;
    margin-bottom: 4px;
}

#adminManagementPanel .muted-text {
    line-height: 1.35;
}

.admin-account-form .text-input:not(:disabled),
.admin-account-form .text-area:not(:disabled),
.admin-account-form .select-input:not(:disabled) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(249, 253, 255, 0.98) 100%);
    border-color: rgba(72, 117, 142, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(22, 43, 56, 0.03);
    color: #1a3646;
}

.admin-account-form select.text-input:not(:disabled),
.admin-account-form select.select-input:not(:disabled) {
    cursor: pointer;
}

.admin-account-form.is-readonly {
    opacity: 0.94;
}

.admin-account-form-section {
    display: grid;
    gap: 6px;
    padding: 10px 11px;
    border-radius: 14px;
    border: 1px solid rgba(72, 117, 142, 0.16);
    background: linear-gradient(180deg, rgba(249, 252, 254, 0.96) 0%, rgba(242, 248, 251, 0.92) 100%);
}

.admin-plan-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-plan-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 98px;
    min-height: 38px;
    border: 1px solid rgba(72, 117, 142, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.98);
    color: #345364;
    font-size: 12px;
    font-weight: 700;
    padding: 0 14px;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.admin-plan-option:hover:not(:disabled),
.admin-plan-option:focus-visible:not(:disabled) {
    border-color: rgba(14, 159, 136, 0.34);
    box-shadow: 0 0 0 3px rgba(14, 159, 136, 0.12);
    outline: none;
}

.admin-plan-option.is-active {
    border-color: rgba(14, 159, 136, 0.42);
    background: linear-gradient(135deg, rgba(14, 159, 136, 0.22) 0%, rgba(14, 159, 136, 0.12) 100%);
    color: #0b6d60;
    box-shadow: 0 10px 24px rgba(14, 159, 136, 0.12);
}

.admin-plan-option.is-disabled,
.admin-plan-option[aria-disabled="true"] {
    opacity: 0.58;
    cursor: not-allowed;
    pointer-events: none;
}

.admin-plan-option-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.admin-account-section-head {
    display: grid;
    gap: 3px;
}

.admin-account-section-head strong {
    font-size: 14px;
    line-height: 1.2;
}

.admin-account-section-head small {
    color: var(--text-muted);
}

.admin-account-meta,
.admin-account-hint {
    font-size: 12px;
}

.admin-account-override-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

.admin-account-inline-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-account-inline-field .text-input {
    flex: 1 1 auto;
}

.admin-account-inline-action {
    flex: 0 0 auto;
}

.admin-account-inline-hint {
    display: block;
    margin-top: 4px;
}

.admin-account-quota-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(14, 159, 136, 0.18);
    background:
        radial-gradient(circle at top right, rgba(14, 159, 136, 0.12) 0%, transparent 32%),
        linear-gradient(180deg, rgba(245, 252, 250, 0.98) 0%, rgba(239, 248, 246, 0.94) 100%);
}

.admin-account-quota-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.admin-account-quota-head strong {
    display: block;
    font-size: 15px;
    line-height: 1.2;
}

.admin-account-quota-head small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
}

.admin-account-quota-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(14, 159, 136, 0.28);
    background: rgba(14, 159, 136, 0.1);
    color: #0f6f61;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.admin-account-quota-pill.is-warning {
    border-color: rgba(212, 163, 44, 0.3);
    background: rgba(236, 191, 75, 0.14);
    color: #7b5a06;
}

.admin-account-quota-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.admin-account-quota-item {
    display: grid;
    gap: 4px;
    padding: 10px 11px;
    border-radius: 12px;
    border: 1px solid rgba(72, 117, 142, 0.14);
    background: rgba(255, 255, 255, 0.74);
}

.admin-account-quota-item span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #537081;
}

.admin-account-quota-item strong {
    font-size: 16px;
    line-height: 1.2;
}

.admin-account-quota-item small {
    color: var(--text-muted);
}

.admin-account-form .text-input:disabled {
    opacity: 1;
    color: #78909b;
    background: rgba(239, 245, 248, 0.98);
    border-color: rgba(72, 117, 142, 0.14);
    cursor: not-allowed;
}

@media (max-width: 1180px) {
    #adminManagementPanel .admin-management-toolbar-card,
    #adminManagementPanel .admin-management-head {
        flex-direction: column;
        align-items: stretch;
    }

    #adminManagementPanel .admin-management-pane-tabs {
        justify-content: flex-start;
    }

    #adminManagementPanel .admin-user-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    #adminManagementPanel .admin-management-detail-column {
        position: static;
        max-height: none;
        overflow: visible;
    }

    #adminManagementPanel .admin-management-table-wrap {
        max-height: none;
    }
}

@media (max-width: 760px) {
    .admin-account-override-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-account-inline-field {
        align-items: stretch;
        flex-direction: column;
    }
}

.admin-account-access-wrap {
    display: grid;
    gap: 8px;
}

.admin-account-access-list {
    display: grid;
    gap: 6px;
    max-height: 190px;
    overflow: auto;
    padding-right: 4px;
}

.admin-account-access-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid rgba(72, 117, 142, 0.16);
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(249, 252, 254, 0.88);
}

.admin-account-access-item input {
    margin-top: 2px;
}

.admin-account-access-copy {
    display: grid;
    gap: 2px;
}

.admin-account-access-copy strong {
    font-size: 13px;
    line-height: 1.2;
}

.admin-account-access-copy small {
    font-size: 11px;
    color: var(--text-muted);
}

.admin-account-empty {
    margin: 0;
    font-size: 12px;
}

.admin-account-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.admin-account-actions-single {
    grid-template-columns: minmax(0, 1fr);
}

.admin-account-form-inline {
    display: grid;
    gap: 8px;
}

.admin-user-summary-cell,
.admin-user-status-cell {
    display: grid;
    gap: 4px;
}

.admin-user-meta-row {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.35;
}

.admin-user-status-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.admin-inline-toggle-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.admin-inline-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    border: 1px solid rgba(72, 117, 142, 0.16);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(249, 252, 254, 0.88);
    cursor: pointer;
}

.admin-inline-toggle input {
    margin: 0;
}

.admin-motd-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
}

.admin-motd-status-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.admin-motd-preview,
.admin-motd-scope,
.admin-motd-signature {
    display: block;
    margin-top: 4px;
    line-height: 1.45;
    white-space: normal;
}

.admin-motd-preview {
    max-width: 380px;
}

@media (max-width: 960px) {
    .workspace-motd-banner-card,
    .dashboard-motd-item-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .motd-dismiss-btn,
    .motd-dismiss-btn-inline {
        align-self: flex-end;
    }

    .admin-motd-grid {
        grid-template-columns: 1fr;
    }

    .admin-user-form-grid {
        grid-template-columns: 1fr;
    }
}

.admin-filter-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.admin-filter-field {
    display: grid;
    gap: 6px;
}

.admin-filter-actions {
    display: flex;
    align-items: end;
    justify-content: flex-end;
}

.admin-table-toolbar {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-table-toolbar p {
    margin: 4px 0 0;
}

.admin-table-search {
    width: min(220px, 100%);
}

.admin-activity-card {
    display: grid;
    gap: 12px;
}

#adminActivityPanel .admin-activity-hero {
    display: grid;
    grid-template-columns: minmax(320px, 0.92fr) minmax(540px, 1.28fr);
    gap: 14px;
    margin: 12px 0;
    align-items: stretch;
}

#adminActivityPanel .admin-activity-hero-card,
#adminActivityPanel .admin-activity-cluster-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(88, 138, 144, 0.22);
    background: linear-gradient(180deg, rgba(7, 18, 24, 0.97) 0%, rgba(10, 24, 31, 0.95) 100%);
    box-shadow: 0 24px 42px rgba(7, 18, 24, 0.22);
}

#adminActivityPanel .admin-activity-hero-card::before,
#adminActivityPanel .admin-activity-cluster-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(119, 151, 164, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(119, 151, 164, 0.07) 1px, transparent 1px),
        radial-gradient(circle at top right, rgba(28, 183, 154, 0.15) 0%, transparent 28%);
    background-size: 20px 20px, 20px 20px, auto;
    opacity: 0.66;
    pointer-events: none;
}

#adminActivityPanel .admin-activity-hero-card > *,
#adminActivityPanel .admin-activity-cluster-card > * {
    position: relative;
    z-index: 1;
}

#adminActivityPanel .admin-activity-hero-card h3,
#adminActivityPanel .admin-activity-cluster-head h3 {
    margin: 0;
    color: #effffb;
}

#adminActivityPanel .admin-activity-hero-card .muted-text,
#adminActivityPanel .admin-activity-cluster-head .muted-text {
    color: rgba(195, 220, 222, 0.72);
}

#adminActivityPanel .admin-activity-hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

#adminActivityPanel .admin-activity-hero-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(122, 235, 206, 0.18);
    background: rgba(10, 28, 35, 0.78);
    color: #baf3e7;
    box-shadow: inset 0 0 0 1px rgba(122, 235, 206, 0.06);
    font-size: 12px;
    font-weight: 700;
}

#adminActivityPanel .admin-activity-hero-chip-strong {
    background: linear-gradient(135deg, rgba(16, 93, 78, 0.84) 0%, rgba(12, 58, 49, 0.96) 100%);
    color: #ebfffa;
    border-color: rgba(122, 235, 206, 0.3);
    box-shadow: 0 12px 22px rgba(6, 28, 24, 0.28);
}

#adminActivityPanel .admin-activity-alert {
    margin: 0 0 12px;
    border: 1px solid rgba(255, 160, 121, 0.28);
    border-radius: 16px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(63, 30, 24, 0.92) 0%, rgba(41, 18, 15, 0.96) 100%);
    color: #ffd9cb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#adminActivityPanel .admin-activity-alert.is-offline {
    border-color: rgba(255, 98, 121, 0.32);
    background: linear-gradient(135deg, rgba(69, 22, 30, 0.94) 0%, rgba(43, 14, 19, 0.97) 100%);
    color: #ffd6de;
}

#adminActivityPanel .admin-activity-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#adminActivityPanel .admin-summary-card {
    min-height: 102px;
    border-color: rgba(120, 166, 173, 0.18);
    background: linear-gradient(180deg, rgba(8, 26, 33, 0.92) 0%, rgba(10, 31, 39, 0.86) 100%);
    box-shadow: inset 0 0 0 1px rgba(104, 196, 174, 0.06);
}

#adminActivityPanel .admin-summary-card span,
#adminActivityPanel .admin-summary-card small {
    color: rgba(194, 220, 223, 0.74);
}

#adminActivityPanel .admin-summary-card strong {
    color: #f1fffb;
    text-shadow: 0 0 18px rgba(88, 224, 192, 0.18);
}

#adminActivityPanel .admin-activity-signal-stack {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

#adminActivityPanel .admin-activity-signal-card,
#adminActivityPanel .admin-activity-throughput-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(98, 153, 160, 0.18);
    border-radius: 18px;
    padding: 12px 14px;
    background: rgba(7, 24, 31, 0.82);
    display: grid;
    gap: 8px;
}

#adminActivityPanel .admin-activity-signal-card::before,
#adminActivityPanel .admin-activity-throughput-card::before {
    content: "";
    position: absolute;
    inset: auto 14px 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(122, 235, 206, 0) 0%, rgba(122, 235, 206, 0.24) 20%, rgba(122, 235, 206, 0.4) 50%, rgba(122, 235, 206, 0.24) 80%, rgba(122, 235, 206, 0) 100%);
    pointer-events: none;
}

#adminActivityPanel .admin-activity-signal-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

#adminActivityPanel .admin-activity-signal-head span,
#adminActivityPanel .admin-activity-throughput-card span {
    color: rgba(196, 223, 225, 0.74);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#adminActivityPanel .admin-activity-signal-head strong,
#adminActivityPanel .admin-activity-throughput-card strong {
    color: #effffb;
    font-size: 25px;
    line-height: 1;
}

#adminActivityPanel .admin-activity-signal-card small,
#adminActivityPanel .admin-activity-throughput-card small {
    color: rgba(196, 223, 225, 0.74);
    font-size: 11px;
    line-height: 1.4;
}

#adminActivityPanel .admin-activity-balance-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(156, 201, 205, 0.09);
}

#adminActivityPanel .admin-activity-balance-segment {
    width: 0%;
    min-width: 0;
    transition: width 180ms ease;
}

#adminActivityPanel .admin-activity-balance-segment.is-busy,
#adminActivityPanel .admin-activity-battery-segment.is-busy {
    background: linear-gradient(90deg, #ff827f 0%, #ff5d6e 100%);
}

#adminActivityPanel .admin-activity-balance-segment.is-idle,
#adminActivityPanel .admin-activity-battery-segment.is-idle {
    background: linear-gradient(90deg, #9af7df 0%, #1cb79a 100%);
}

#adminActivityPanel .admin-activity-balance-segment.is-offline,
#adminActivityPanel .admin-activity-battery-segment.is-offline {
    background: linear-gradient(90deg, #95a7b0 0%, #5f747f 100%);
}

#adminActivityPanel .admin-activity-balance-segment.is-health-success {
    background: linear-gradient(90deg, #9af7df 0%, #1cb79a 100%);
}

#adminActivityPanel .admin-activity-balance-segment.is-health-failed {
    background: linear-gradient(90deg, #ff8a84 0%, #ff5d6e 100%);
}

#adminActivityPanel .admin-activity-balance-segment.is-health-other {
    background: rgba(177, 213, 218, 0.24);
}

#adminActivityPanel .admin-activity-balance-segment.is-system-used {
    background: linear-gradient(90deg, #ffd26f 0%, #ff7a5c 100%);
}

#adminActivityPanel .admin-activity-balance-segment.is-system-free {
    background: linear-gradient(90deg, #9af7df 0%, #1cb79a 100%);
}

#adminActivityPanel .admin-activity-balance-segment.is-job-running {
    background: linear-gradient(90deg, #ff796a 0%, #ff4b5e 100%);
}

#adminActivityPanel .admin-activity-balance-segment.is-job-queued {
    background: linear-gradient(90deg, #9af7df 0%, #1cb79a 100%);
}

#adminActivityPanel .admin-activity-balance-segment.is-job-terminal {
    background: rgba(177, 213, 218, 0.24);
}

#adminActivityPanel .admin-activity-cluster-card {
    display: grid;
    gap: 16px;
    padding: 18px;
}

#adminActivityPanel .admin-activity-cluster-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

#adminActivityPanel .admin-activity-cluster-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(240px, 0.84fr);
    gap: 16px;
    align-items: stretch;
}

#adminActivityPanel .admin-activity-cluster-map {
    min-height: 460px;
    border-radius: 22px;
    border: 1px solid rgba(96, 150, 156, 0.18);
    background:
        radial-gradient(circle at top right, rgba(31, 198, 163, 0.12) 0%, transparent 28%),
        linear-gradient(180deg, rgba(5, 16, 22, 0.86) 0%, rgba(7, 18, 24, 0.94) 100%);
    overflow: hidden;
}

#adminActivityPanel .admin-activity-cluster-stage {
    position: relative;
    width: 100%;
    min-height: 460px;
}

#adminActivityPanel .admin-activity-cluster-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(137, 177, 182, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(137, 177, 182, 0.06) 1px, transparent 1px);
    background-size: 24px 24px, 24px 24px;
    opacity: 0.52;
    pointer-events: none;
}

#adminActivityPanel .admin-activity-cluster-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 12px rgba(86, 218, 186, 0.16));
}

#adminActivityPanel .admin-activity-cluster-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(48vw, 268px);
    max-width: 50%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
}

#adminActivityPanel .admin-activity-cluster-core-halo,
#adminActivityPanel .admin-activity-cluster-core-ring,
#adminActivityPanel .admin-activity-cluster-core-ring-fill {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

#adminActivityPanel .admin-activity-cluster-core-halo {
    inset: 10px;
    box-shadow: inset 0 0 0 1px rgba(120, 148, 160, 0.16), 0 22px 38px rgba(3, 15, 20, 0.34);
}

#adminActivityPanel .admin-activity-cluster-core-ring {
    inset: 24px;
    background:
        radial-gradient(circle at center, rgba(13, 29, 36, 0) 58%, rgba(8, 18, 24, 0.92) 58.5%),
        conic-gradient(rgba(87, 109, 117, 0.18) 0turn 1turn);
    box-shadow: inset 0 0 0 1px rgba(120, 148, 160, 0.12), 0 0 0 1px rgba(125, 156, 163, 0.08);
}

#adminActivityPanel .admin-activity-cluster-core-ring-fill {
    inset: 24px;
    box-shadow: inset 0 0 0 1px rgba(190, 255, 242, 0.04);
}

#adminActivityPanel .admin-activity-cluster-core-center {
    position: relative;
    width: calc(100% - 74px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at top, rgba(117, 255, 221, 0.09) 0%, transparent 28%),
        linear-gradient(180deg, rgba(8, 25, 33, 0.96) 0%, rgba(10, 30, 39, 0.92) 100%);
    border: 1px solid rgba(129, 190, 182, 0.16);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    padding: 18px;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(112, 231, 204, 0.05);
}

#adminActivityPanel .admin-activity-cluster-core-center small,
#adminActivityPanel .admin-activity-cluster-core-center span,
#adminActivityPanel .admin-activity-cluster-core-center em,
#adminActivityPanel .admin-activity-cluster-core-center b {
    font-style: normal;
    color: rgba(198, 224, 226, 0.76);
}

#adminActivityPanel .admin-activity-cluster-core-center small {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#adminActivityPanel .admin-activity-cluster-core-center strong {
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1;
    color: #effffb;
    text-shadow: 0 0 24px rgba(121, 245, 212, 0.24);
}

#adminActivityPanel .admin-activity-cluster-core-center span,
#adminActivityPanel .admin-activity-cluster-core-center em,
#adminActivityPanel .admin-activity-cluster-core-center b {
    font-size: 12px;
    line-height: 1.45;
}

#adminActivityPanel .admin-activity-orbit-node {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 72px;
    display: grid;
    justify-items: center;
}

#adminActivityPanel .admin-activity-orbit-node-ring {
    width: 72px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, rgba(9, 23, 30, 0.2) 44%, rgba(9, 23, 30, 0.82) 46%),
        conic-gradient(var(--worker-color) 0turn 0.86turn, rgba(135, 170, 182, 0.14) 0.86turn 1turn);
    box-shadow: inset 0 0 0 1px rgba(214, 255, 247, 0.08), 0 18px 28px rgba(3, 14, 19, 0.34);
}

#adminActivityPanel .admin-activity-orbit-node-core {
    width: calc(100% - 12px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 1px;
    padding: 5px;
    background: linear-gradient(180deg, rgba(8, 27, 35, 0.98) 0%, rgba(10, 31, 39, 0.94) 100%);
    border: 1px solid rgba(123, 186, 179, 0.12);
}

#adminActivityPanel .admin-activity-orbit-node-core strong {
    color: #f2fffb;
    font-size: 13px;
    line-height: 1;
}

#adminActivityPanel .admin-activity-orbit-node-core span {
    max-width: 46px;
    color: rgba(194, 222, 224, 0.82);
    font-size: 7px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
}

#adminActivityPanel .admin-activity-orbit-node.is-busy .admin-activity-orbit-node-ring {
    box-shadow: inset 0 0 0 1px rgba(255, 176, 176, 0.12), 0 18px 28px rgba(52, 10, 19, 0.32);
}

#adminActivityPanel .admin-activity-orbit-node.is-offline {
    opacity: 0.78;
}

#adminActivityPanel .admin-activity-cluster-alert {
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 3;
    border: 1px solid rgba(255, 162, 122, 0.24);
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(58, 31, 20, 0.88);
    color: #ffd4c4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#adminActivityPanel .admin-activity-cluster-alert.is-offline {
    border-color: rgba(255, 108, 126, 0.28);
    background: rgba(68, 20, 28, 0.9);
    color: #ffd7df;
}

#adminActivityPanel .admin-activity-throughput-stack {
    display: grid;
    gap: 12px;
    align-content: start;
}

#adminActivityPanel .admin-activity-runtime-card {
    gap: 12px;
}

#adminActivityPanel .admin-activity-runtime-bar {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(156, 201, 205, 0.09);
    box-shadow: inset 0 0 0 1px rgba(132, 176, 181, 0.08);
}

#adminActivityPanel .admin-activity-runtime-segment {
    width: 0%;
    min-width: 0;
    transition: width 180ms ease;
}

#adminActivityPanel .admin-activity-runtime-segment.is-download {
    background: linear-gradient(90deg, #78d5ff 0%, #2da7ff 100%);
}

#adminActivityPanel .admin-activity-runtime-segment.is-processing {
    background: linear-gradient(90deg, #9af7df 0%, #1cb79a 100%);
}

#adminActivityPanel .admin-activity-runtime-segment.is-upload {
    background: linear-gradient(90deg, #ffd26f 0%, #ff7a5c 100%);
}

#adminActivityPanel .admin-activity-runtime-legend {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

#adminActivityPanel .admin-activity-runtime-legend-item {
    border: 1px solid rgba(98, 153, 160, 0.16);
    border-radius: 14px;
    padding: 10px 10px 9px;
    background: rgba(8, 26, 33, 0.72);
    display: grid;
    gap: 4px;
}

#adminActivityPanel .admin-activity-runtime-legend-item span {
    color: rgba(196, 223, 225, 0.74);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#adminActivityPanel .admin-activity-runtime-legend-item strong {
    color: #effffb;
    font-size: 20px;
    line-height: 1;
}

#adminActivityPanel .admin-activity-runtime-legend-item small {
    color: rgba(196, 223, 225, 0.74);
    font-size: 10px;
    line-height: 1.35;
}

#adminActivityPanel .admin-activity-runtime-metric-card strong {
    font-size: clamp(28px, 2.4vw, 38px);
}

#adminActivityPanel .admin-activity-health-bar {
    height: 12px;
}

#adminActivityPanel .admin-activity-cluster-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 18%, transparent 82%, rgba(122, 235, 206, 0.03) 100%);
    pointer-events: none;
}

#adminActivityPanel .admin-activity-linkalt-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 16px;
    margin-top: 12px;
    border: 1px solid rgba(88, 138, 144, 0.22);
    background: linear-gradient(180deg, rgba(7, 18, 24, 0.97) 0%, rgba(10, 24, 31, 0.95) 100%);
    box-shadow: 0 24px 42px rgba(7, 18, 24, 0.22);
}

#adminActivityPanel .admin-activity-linkalt-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(119, 151, 164, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(119, 151, 164, 0.07) 1px, transparent 1px),
        radial-gradient(circle at top right, rgba(31, 198, 163, 0.14) 0%, transparent 28%);
    background-size: 20px 20px, 20px 20px, auto;
    opacity: 0.66;
    pointer-events: none;
}

#adminActivityPanel .admin-activity-linkalt-card > * {
    position: relative;
    z-index: 1;
}

#adminActivityPanel .admin-activity-linkalt-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

#adminActivityPanel .admin-activity-linkalt-head h3 {
    margin: 0;
    color: #effffb;
}

#adminActivityPanel .admin-activity-linkalt-head .muted-text {
    color: rgba(195, 220, 222, 0.72);
}

#adminActivityPanel .admin-activity-linkalt-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(240px, 0.76fr);
    gap: 16px;
    align-items: stretch;
}

#adminActivityPanel .admin-activity-linkalt-map-wrap {
    min-height: 440px;
    border-radius: 22px;
    border: 1px solid rgba(96, 150, 156, 0.18);
    background:
        radial-gradient(circle at top right, rgba(31, 198, 163, 0.11) 0%, transparent 28%),
        linear-gradient(180deg, rgba(5, 16, 22, 0.9) 0%, rgba(7, 18, 24, 0.96) 100%);
    overflow: hidden;
}

#adminActivityPanel .admin-activity-linkalt-map,
#adminActivityPanel .admin-activity-linkalt-stage {
    position: relative;
    width: 100%;
    min-height: 440px;
}

#adminActivityPanel .admin-activity-linkalt-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(137, 177, 182, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(137, 177, 182, 0.05) 1px, transparent 1px);
    background-size: 26px 26px, 26px 26px;
    opacity: 0.48;
    pointer-events: none;
}

#adminActivityPanel .admin-activity-linkalt-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(255, 194, 115, 0.14));
}

#adminActivityPanel .admin-activity-linkalt-alert {
    position: absolute;
    left: 20px;
    top: 18px;
    z-index: 3;
    border: 1px solid rgba(255, 162, 122, 0.24);
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(58, 31, 20, 0.88);
    color: #ffd4c4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#adminActivityPanel .admin-activity-linkalt-alert.is-offline {
    border-color: rgba(255, 108, 126, 0.28);
    background: rgba(68, 20, 28, 0.9);
    color: #ffd7df;
}

#adminActivityPanel .admin-activity-linkalt-scale {
    position: absolute;
    left: 22px;
    right: 120px;
    top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(194, 223, 225, 0.72);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#adminActivityPanel .admin-activity-linkalt-uplink-stack {
    position: absolute;
    inset: 58px auto 58px 18px;
    width: 220px;
}

#adminActivityPanel .admin-activity-linkalt-uplink {
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 200px;
}

#adminActivityPanel .admin-activity-linkalt-uplink-pin {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(118, 174, 180, 0.2);
    background: rgba(7, 24, 31, 0.9);
    color: rgba(191, 220, 222, 0.72);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

#adminActivityPanel .admin-activity-linkalt-uplink-copy {
    display: grid;
    gap: 2px;
    padding-bottom: 2px;
}

#adminActivityPanel .admin-activity-linkalt-uplink-copy strong {
    color: #effffb;
    font-size: 14px;
    line-height: 1.1;
}

#adminActivityPanel .admin-activity-linkalt-uplink-copy span {
    color: rgba(194, 223, 225, 0.72);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#adminActivityPanel .admin-activity-linkalt-uplink.is-idle .admin-activity-linkalt-uplink-copy strong {
    color: #9af7df;
}

#adminActivityPanel .admin-activity-linkalt-uplink.is-busy .admin-activity-linkalt-uplink-copy strong {
    color: #ff8a84;
}

#adminActivityPanel .admin-activity-linkalt-uplink.is-offline .admin-activity-linkalt-uplink-copy strong {
    color: #97a8b1;
}

#adminActivityPanel .admin-activity-linkalt-hub {
    position: absolute;
    left: 55%;
    bottom: 24px;
    transform: translateX(-50%);
    width: 190px;
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
}

#adminActivityPanel .admin-activity-linkalt-hub-glow,
#adminActivityPanel .admin-activity-linkalt-hub-core {
    position: absolute;
    border-radius: 50%;
}

#adminActivityPanel .admin-activity-linkalt-hub-glow {
    left: 50%;
    top: -2px;
    width: 54px;
    height: 54px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255, 222, 162, 0.26) 0%, rgba(255, 146, 88, 0.08) 58%, transparent 76%);
    filter: blur(3px);
}

#adminActivityPanel .admin-activity-linkalt-hub-core {
    left: 50%;
    top: 10px;
    width: 14px;
    height: 14px;
    transform: translateX(-50%);
    background: radial-gradient(circle, #ffe2aa 0%, #ffb36e 55%, #ff7f64 100%);
    box-shadow: 0 0 16px rgba(255, 182, 107, 0.56);
}

#adminActivityPanel .admin-activity-linkalt-hub span,
#adminActivityPanel .admin-activity-linkalt-hub small {
    color: rgba(194, 223, 225, 0.72);
}

#adminActivityPanel .admin-activity-linkalt-hub span {
    margin-top: 28px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#adminActivityPanel .admin-activity-linkalt-hub strong {
    color: #effffb;
    font-size: 42px;
    line-height: 1;
    text-shadow: 0 0 22px rgba(255, 194, 115, 0.18);
}

#adminActivityPanel .admin-activity-linkalt-hub small {
    font-size: 12px;
    line-height: 1.45;
}

#adminActivityPanel .admin-activity-linkalt-capacity {
    position: absolute;
    right: 26px;
    top: 52px;
    bottom: 38px;
    width: 96px;
    display: grid;
    justify-items: center;
    align-content: end;
    gap: 10px;
    text-align: center;
}

#adminActivityPanel .admin-activity-linkalt-capacity small,
#adminActivityPanel .admin-activity-linkalt-capacity span {
    color: rgba(194, 223, 225, 0.72);
    font-size: 11px;
    line-height: 1.35;
}

#adminActivityPanel .admin-activity-linkalt-capacity strong {
    color: #effffb;
    font-size: 30px;
    line-height: 1;
}

#adminActivityPanel .admin-activity-linkalt-capacity-track {
    position: relative;
    width: 24px;
    height: 260px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(170, 201, 206, 0.12);
    box-shadow: inset 0 0 0 1px rgba(126, 174, 180, 0.16);
}

#adminActivityPanel .admin-activity-linkalt-capacity-track::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 999px;
    border: 1px solid rgba(199, 233, 236, 0.08);
}

#adminActivityPanel .admin-activity-linkalt-capacity-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 999px;
    box-shadow: 0 0 20px rgba(122, 235, 206, 0.14);
}

#adminActivityPanel .admin-activity-linkalt-capacity.is-mid .admin-activity-linkalt-capacity-fill {
    box-shadow: 0 0 20px rgba(255, 193, 104, 0.14);
}

#adminActivityPanel .admin-activity-linkalt-capacity.is-low .admin-activity-linkalt-capacity-fill {
    box-shadow: 0 0 20px rgba(255, 113, 118, 0.14);
}

#adminActivityPanel .admin-activity-linkalt-footer {
    position: absolute;
    left: 22px;
    right: 122px;
    bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: rgba(194, 223, 225, 0.72);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#adminActivityPanel .admin-activity-linkalt-side {
    display: grid;
    gap: 12px;
    align-content: start;
}

#adminActivityPanel .admin-activity-linkalt-kpi {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(98, 153, 160, 0.18);
    border-radius: 18px;
    padding: 14px 16px;
    background: rgba(7, 24, 31, 0.82);
    display: grid;
    gap: 8px;
    min-height: 102px;
}

#adminActivityPanel .admin-activity-linkalt-kpi::before {
    content: "";
    position: absolute;
    inset: auto 14px 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(122, 235, 206, 0) 0%, rgba(122, 235, 206, 0.24) 20%, rgba(122, 235, 206, 0.4) 50%, rgba(122, 235, 206, 0.24) 80%, rgba(122, 235, 206, 0) 100%);
    pointer-events: none;
}

#adminActivityPanel .admin-activity-linkalt-kpi span {
    color: rgba(196, 223, 225, 0.74);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#adminActivityPanel .admin-activity-linkalt-kpi strong {
    color: #effffb;
    font-size: 28px;
    line-height: 1;
}

#adminActivityPanel .admin-activity-linkalt-kpi small {
    color: rgba(196, 223, 225, 0.74);
    font-size: 11px;
    line-height: 1.45;
}

@media (max-width: 1180px) {
    #adminActivityPanel .admin-activity-hero,
    #adminActivityPanel .admin-activity-cluster-layout,
    #adminActivityPanel .admin-activity-linkalt-layout {
        grid-template-columns: 1fr;
    }

    #adminActivityPanel .admin-activity-cluster-map,
    #adminActivityPanel .admin-activity-cluster-stage,
    #adminActivityPanel .admin-activity-linkalt-map,
    #adminActivityPanel .admin-activity-linkalt-stage {
        min-height: 520px;
    }
}

@media (max-width: 760px) {
    #adminActivityPanel .admin-activity-summary-grid {
        grid-template-columns: 1fr;
    }

    #adminActivityPanel .admin-activity-linkalt-uplink-stack {
        width: 176px;
    }

    #adminActivityPanel .admin-activity-linkalt-uplink {
        width: 164px;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 8px;
    }

    #adminActivityPanel .admin-activity-linkalt-uplink-pin {
        width: 28px;
        font-size: 9px;
    }

    #adminActivityPanel .admin-activity-linkalt-uplink-copy strong {
        font-size: 12px;
    }

    #adminActivityPanel .admin-activity-linkalt-capacity {
        right: 14px;
        width: 78px;
    }

    #adminActivityPanel .admin-activity-linkalt-capacity-track {
        height: 220px;
        width: 20px;
    }
}

.admin-dashboard-note {
    display: grid;
    gap: 8px;
}

.admin-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #0f584c;
    background: rgba(14, 159, 136, 0.14);
    border: 1px solid rgba(14, 159, 136, 0.28);
}

.admin-role-badge.is-admin {
    color: #0f584c;
    background: rgba(14, 159, 136, 0.14);
    border-color: rgba(14, 159, 136, 0.28);
}

.admin-role-badge.is-supporter {
    color: #5f4200;
    background: rgba(224, 173, 38, 0.16);
    border-color: rgba(224, 173, 38, 0.28);
}

.admin-role-badge.is-agency {
    color: #7a2148;
    background: rgba(210, 83, 139, 0.14);
    border-color: rgba(210, 83, 139, 0.24);
}

.admin-role-badge.is-user,
.admin-role-badge.is-account,
.admin-role-badge.is-member {
    color: #31586d;
    background: rgba(90, 135, 162, 0.12);
    border-color: rgba(90, 135, 162, 0.22);
}

.admin-account-meta.is-error,
.admin-account-hint.is-error,
#settingsPasswordStatus.is-error,
#loginStatus.is-error,
#adminUserPasswordStatus.is-error,
#adminDashboardStatusLine.is-error {
    color: #a2483f;
}

.admin-account-meta.is-success,
#settingsPasswordStatus.is-success,
#loginStatus.is-success,
#adminUserPasswordStatus.is-success,
#adminDashboardStatusLine.is-success {
    color: #0f7c6b;
}

.timeline-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.timeline-status-badge.status-warning {
    color: #8a6500;
    background: rgba(224, 173, 38, 0.16);
    border: 1px solid rgba(224, 173, 38, 0.3);
}

.timeline-status-badge.status-completed {
    color: #0f7c6b;
    background: rgba(14, 159, 136, 0.14);
    border: 1px solid rgba(14, 159, 136, 0.28);
}

.timeline-status-badge.status-failed {
    color: #a2483f;
    background: rgba(203, 91, 79, 0.12);
    border: 1px solid rgba(203, 91, 79, 0.24);
}

.timeline-table tbody tr.is-selected {
    background: rgba(52, 137, 204, 0.08);
}

.admin-dashboard-status-line {
    margin: 0;
}

.admin-storage-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
    gap: 12px;
    margin-bottom: 12px;
    align-items: stretch;
}

.admin-storage-hero-card,
.admin-storage-gauge-card,
.admin-storage-window-card,
.admin-storage-node-card {
    animation: reveal 0.2s ease;
}

.admin-storage-hero-card {
    display: grid;
    gap: 12px;
}

.admin-storage-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.admin-storage-hero-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border-radius: 999px;
    padding: 6px 12px;
    background: rgba(19, 73, 101, 0.08);
    border: 1px solid rgba(72, 117, 142, 0.16);
    color: #37586a;
    font-size: 12px;
    font-weight: 700;
}

.admin-storage-summary-grid {
    margin: 0;
}

.admin-storage-gauge-card {
    display: grid;
    gap: 16px;
    justify-items: center;
    align-content: center;
}

.admin-storage-gauge {
    --usage-ratio: 0;
    --occupied-ratio: 0;
    width: min(220px, 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        conic-gradient(
            #0f9f88 0turn calc(var(--usage-ratio) * 1turn),
            #d8a62a calc(var(--usage-ratio) * 1turn) calc(var(--occupied-ratio) * 1turn),
            rgba(117, 149, 169, 0.2) calc(var(--occupied-ratio) * 1turn) 1turn
        );
    box-shadow: 0 28px 44px rgba(11, 45, 63, 0.16);
}

.admin-storage-gauge-ring {
    width: calc(100% - 28px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    gap: 4px;
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #eef6fa 100%);
    box-shadow: inset 0 0 0 1px rgba(72, 117, 142, 0.12);
}

.admin-storage-gauge-ring strong {
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1;
    color: #133444;
}

.admin-storage-gauge-ring span {
    font-size: 12px;
    color: #5b7787;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-storage-gauge-meta {
    width: 100%;
    display: grid;
    gap: 10px;
}

.admin-storage-gauge-meta div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(72, 117, 142, 0.12);
    padding-top: 10px;
}

.admin-storage-gauge-meta span {
    color: var(--text-muted);
    font-size: 12px;
}

.admin-storage-gauge-meta strong {
    color: #133444;
    font-size: 15px;
}

.admin-storage-window-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-storage-window-card {
    border: 1px solid rgba(72, 117, 142, 0.16);
    border-radius: 14px;
    padding: 14px;
    background:
        radial-gradient(circle at top right, rgba(15, 159, 136, 0.12), transparent 42%),
        linear-gradient(180deg, #fbfdfe 0%, #f2f7fa 100%);
    display: grid;
    gap: 12px;
}

.admin-storage-window-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.admin-storage-window-head strong {
    color: #133444;
    font-size: 15px;
}

.admin-storage-window-head span {
    color: #678293;
    font-size: 11px;
}

.admin-storage-window-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.admin-storage-window-metrics div {
    display: grid;
    gap: 4px;
}

.admin-storage-window-metrics span {
    color: var(--text-muted);
    font-size: 11px;
}

.admin-storage-window-metrics strong {
    color: #133444;
    font-size: 15px;
}

.admin-storage-window-metrics small {
    color: #5f7b8c;
    font-size: 11px;
}

.admin-storage-account-list,
.admin-storage-notes,
.admin-storage-check-list {
    display: grid;
    gap: 10px;
}

.admin-storage-account-item,
.admin-storage-note-item,
.admin-storage-check-item {
    border: 1px solid rgba(72, 117, 142, 0.16);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(249, 252, 254, 0.92);
}

.admin-storage-account-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.admin-storage-account-rank {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0f9f88 0%, #138f7d 100%);
    color: #f7fffd;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(15, 159, 136, 0.24);
}

.admin-storage-account-copy,
.admin-storage-note-item,
.admin-storage-check-item {
    display: grid;
    gap: 4px;
}

.admin-storage-account-copy strong,
.admin-storage-note-item strong,
.admin-storage-check-item strong {
    color: #133444;
    font-size: 14px;
}

.admin-storage-account-copy small,
.admin-storage-note-item span,
.admin-storage-check-item span {
    color: #5f7b8c;
    font-size: 12px;
}

.admin-storage-note-item.is-muted {
    background: rgba(19, 73, 101, 0.05);
}

.admin-storage-check-item.is-ok {
    border-color: rgba(14, 159, 136, 0.26);
    background: rgba(14, 159, 136, 0.08);
}

.admin-storage-check-item.is-missing {
    border-color: rgba(203, 91, 79, 0.22);
    background: rgba(203, 91, 79, 0.08);
}

.admin-storage-node-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}

.admin-storage-node-card {
    border: 1px solid rgba(72, 117, 142, 0.16);
    border-radius: 16px;
    padding: 16px;
    background:
        radial-gradient(circle at top left, rgba(38, 165, 143, 0.12), transparent 40%),
        linear-gradient(180deg, #fcfeff 0%, #f2f7fa 100%);
    display: grid;
    gap: 14px;
}

.admin-storage-node-head,
.admin-storage-node-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.admin-storage-node-head h4 {
    margin: 0;
    color: #133444;
}

.admin-storage-node-head p,
.admin-storage-node-lastseen,
.admin-storage-node-activity span {
    margin: 4px 0 0;
    color: #617e8f;
    font-size: 12px;
}

.admin-storage-node-head-meta {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.admin-storage-node-donut {
    --usage-ratio: 0;
    --occupied-ratio: 0;
    width: 112px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        conic-gradient(
            #0f9f88 0turn calc(var(--usage-ratio) * 1turn),
            #d8a62a calc(var(--usage-ratio) * 1turn) calc(var(--occupied-ratio) * 1turn),
            rgba(117, 149, 169, 0.2) calc(var(--occupied-ratio) * 1turn) 1turn
        );
}

.admin-storage-node-donut-inner {
    width: calc(100% - 18px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff 0%, #edf5f9 100%);
    display: grid;
    place-items: center;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(72, 117, 142, 0.12);
}

.admin-storage-node-donut-inner strong {
    color: #133444;
    font-size: 20px;
    line-height: 1;
}

.admin-storage-node-donut-inner span {
    color: #617e8f;
    font-size: 11px;
}

.admin-storage-node-stats {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-storage-node-stats div,
.admin-storage-node-brand {
    border: 1px solid rgba(72, 117, 142, 0.12);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.74);
    display: grid;
    gap: 4px;
}

.admin-storage-node-stats span,
.admin-storage-node-brand span {
    color: var(--text-muted);
    font-size: 11px;
}

.admin-storage-node-stats strong,
.admin-storage-node-brand strong {
    color: #133444;
    font-size: 14px;
}

.admin-storage-node-activity {
    display: grid;
    gap: 6px;
}

.admin-storage-node-topbrands {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-storage-node-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 4px 10px;
    margin: 0 6px 6px 0;
    background: rgba(15, 159, 136, 0.1);
    color: #0f584c;
    font-size: 11px;
    font-weight: 700;
}

.admin-storage-bootstrap-preview {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(72, 117, 142, 0.16);
    background: linear-gradient(180deg, #112834 0%, #173847 100%);
    color: #dff5fb;
    font-size: 11px;
    line-height: 1.45;
    max-height: 240px;
    overflow: auto;
}

#adminStoragePanel .admin-account-form {
    gap: 8px;
}

#adminStoragePanel .field-label {
    margin-top: 2px;
}

.admin-storage-inline-notes {
    margin-bottom: 10px;
}

.admin-storage-bootstrap-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
}

.admin-storage-bootstrap-form .admin-account-actions {
    grid-column: 1 / -1;
}

.admin-storage-top-grid,
.admin-storage-bottom-grid,
.admin-storage-hero {
    grid-template-columns: 1fr;
}

.admin-storage-account-list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.admin-storage-guidance-panel,
.admin-storage-overview-card {
    display: grid;
    gap: 14px;
}

.admin-storage-guidance-stack,
.admin-storage-bootstrap-form {
    display: grid;
    gap: 12px;
}

.admin-storage-guidance-stack h4 {
    margin: 0 0 10px;
    color: #133444;
    font-size: 16px;
}

.admin-storage-guidance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.admin-storage-guidance-card {
    border: 1px solid rgba(72, 117, 142, 0.16);
    border-radius: 14px;
    padding: 14px;
    background:
        radial-gradient(circle at top right, rgba(15, 159, 136, 0.08), transparent 38%),
        linear-gradient(180deg, #fbfdfe 0%, #f2f7fa 100%);
    display: grid;
    gap: 8px;
}

.admin-storage-guidance-card strong {
    color: #133444;
    font-size: 15px;
}

.admin-storage-guidance-card span {
    color: #5f7b8c;
    font-size: 13px;
    line-height: 1.6;
}

#adminStoragePanel .admin-storage-hero {
    grid-template-columns: minmax(320px, 0.92fr) minmax(520px, 1.28fr);
    align-items: stretch;
}

#adminStoragePanel .admin-storage-hero-card,
#adminStoragePanel .admin-storage-cluster-card,
#adminStoragePanel .admin-storage-window-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(88, 138, 144, 0.22);
    background:
        linear-gradient(180deg, rgba(7, 18, 24, 0.97) 0%, rgba(10, 24, 31, 0.95) 100%);
    box-shadow: 0 24px 42px rgba(7, 18, 24, 0.22);
}

#adminStoragePanel .admin-storage-hero-card::before,
#adminStoragePanel .admin-storage-cluster-card::before,
#adminStoragePanel .admin-storage-window-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(119, 151, 164, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(119, 151, 164, 0.07) 1px, transparent 1px),
        radial-gradient(circle at top right, rgba(28, 183, 154, 0.16) 0%, transparent 28%);
    background-size: 20px 20px, 20px 20px, auto;
    opacity: 0.66;
    pointer-events: none;
}

#adminStoragePanel .admin-storage-hero-card > *,
#adminStoragePanel .admin-storage-cluster-card > *,
#adminStoragePanel .admin-storage-window-card > * {
    position: relative;
    z-index: 1;
}

#adminStoragePanel .admin-storage-hero-card h3,
#adminStoragePanel .admin-storage-cluster-head h3 {
    margin: 0;
    color: #effffb;
}

#adminStoragePanel .admin-storage-hero-card .muted-text,
#adminStoragePanel .admin-storage-cluster-head .muted-text,
#adminStoragePanel .admin-storage-window-head span {
    color: rgba(195, 220, 222, 0.72);
}

#adminStoragePanel .admin-storage-hero-chip {
    border-color: rgba(122, 235, 206, 0.18);
    background: rgba(10, 28, 35, 0.78);
    color: #baf3e7;
    box-shadow: inset 0 0 0 1px rgba(122, 235, 206, 0.06);
}

#adminStoragePanel .admin-storage-hero-chip-strong {
    background: linear-gradient(135deg, rgba(16, 93, 78, 0.84) 0%, rgba(12, 58, 49, 0.96) 100%);
    color: #ebfffa;
    border-color: rgba(122, 235, 206, 0.3);
    box-shadow: 0 12px 22px rgba(6, 28, 24, 0.28);
}

#adminStoragePanel .admin-storage-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#adminStoragePanel .admin-storage-alert {
    margin: 0 0 12px;
    border: 1px solid rgba(255, 160, 121, 0.28);
    border-radius: 16px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(63, 30, 24, 0.92) 0%, rgba(41, 18, 15, 0.96) 100%);
    color: #ffd9cb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#adminStoragePanel .admin-storage-alert.is-offline {
    border-color: rgba(255, 98, 121, 0.32);
    background: linear-gradient(135deg, rgba(69, 22, 30, 0.94) 0%, rgba(43, 14, 19, 0.97) 100%);
    color: #ffd6de;
}

#adminStoragePanel .admin-storage-signal-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 12px;
}

#adminStoragePanel .admin-storage-signal-card:last-child {
    grid-column: auto;
}

#adminStoragePanel .admin-storage-signal-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(98, 153, 160, 0.18);
    border-radius: 18px;
    padding: 12px 14px;
    background: rgba(7, 24, 31, 0.82);
    display: grid;
    gap: 8px;
    min-height: 92px;
}

#adminStoragePanel .admin-storage-signal-card::before {
    content: "";
    position: absolute;
    inset: auto 14px 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(122, 235, 206, 0) 0%, rgba(122, 235, 206, 0.24) 20%, rgba(122, 235, 206, 0.4) 50%, rgba(122, 235, 206, 0.24) 80%, rgba(122, 235, 206, 0) 100%);
    pointer-events: none;
}

#adminStoragePanel .admin-storage-signal-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

#adminStoragePanel .admin-storage-signal-head span {
    color: rgba(196, 223, 225, 0.74);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#adminStoragePanel .admin-storage-signal-head strong {
    color: #effffb;
    font-size: 24px;
    line-height: 1;
}

#adminStoragePanel .admin-storage-signal-card small {
    color: rgba(196, 223, 225, 0.74);
    font-size: 11px;
    line-height: 1.4;
}

#adminStoragePanel .admin-storage-balance-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(156, 201, 205, 0.09);
}

#adminStoragePanel .admin-storage-balance-segment {
    width: 0%;
    min-width: 0;
    transition: width 180ms ease;
}

#adminStoragePanel .admin-storage-balance-segment.is-used {
    background: linear-gradient(90deg, #9af7df 0%, #3cccae 100%);
}

#adminStoragePanel .admin-storage-balance-segment.is-reserved {
    background: linear-gradient(90deg, #ffb56b 0%, #ff7b61 100%);
}

#adminStoragePanel .admin-storage-balance-segment.is-free {
    background: rgba(177, 213, 218, 0.24);
}

#adminStoragePanel .admin-storage-balance-segment.is-online {
    background: linear-gradient(90deg, #9af7df 0%, #1cb79a 100%);
}

#adminStoragePanel .admin-storage-balance-segment.is-offline {
    background: linear-gradient(90deg, #ff667a 0%, #ff8a66 100%);
}

#adminStoragePanel .admin-storage-balance-segment.is-quota-used {
    background: linear-gradient(90deg, #9af7df 0%, #0f8f7a 100%);
}

#adminStoragePanel .admin-storage-balance-segment.is-quota-free {
    background: rgba(177, 213, 218, 0.24);
}

#adminStoragePanel .admin-summary-card {
    min-height: 102px;
    border-color: rgba(120, 166, 173, 0.18);
    background:
        linear-gradient(180deg, rgba(8, 26, 33, 0.92) 0%, rgba(10, 31, 39, 0.86) 100%);
    box-shadow: inset 0 0 0 1px rgba(104, 196, 174, 0.06);
}

#adminStoragePanel .admin-summary-card span,
#adminStoragePanel .admin-summary-card small {
    color: rgba(194, 220, 223, 0.74);
}

#adminStoragePanel .admin-summary-card strong {
    color: #f1fffb;
    text-shadow: 0 0 18px rgba(88, 224, 192, 0.18);
}

#adminStoragePanel .admin-storage-cluster-card {
    display: grid;
    gap: 16px;
    padding: 18px;
}

#adminStoragePanel .admin-storage-cluster-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

#adminStoragePanel .admin-storage-cluster-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(240px, 0.82fr);
    gap: 16px;
    align-items: stretch;
}

#adminStoragePanel .admin-storage-cluster-map {
    min-height: 460px;
    border-radius: 22px;
    border: 1px solid rgba(96, 150, 156, 0.18);
    background:
        radial-gradient(circle at top right, rgba(31, 198, 163, 0.12) 0%, transparent 28%),
        linear-gradient(180deg, rgba(5, 16, 22, 0.86) 0%, rgba(7, 18, 24, 0.94) 100%);
    overflow: hidden;
}

#adminStoragePanel .admin-storage-cluster-stage {
    position: relative;
    width: 100%;
    min-height: 460px;
}

#adminStoragePanel .admin-storage-cluster-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(137, 177, 182, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(137, 177, 182, 0.06) 1px, transparent 1px);
    background-size: 24px 24px, 24px 24px;
    opacity: 0.52;
    pointer-events: none;
}

#adminStoragePanel .admin-storage-cluster-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(86, 218, 186, 0.14));
}

#adminStoragePanel .admin-storage-cluster-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(52vw, 290px);
    max-width: 56%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
}

#adminStoragePanel .admin-storage-cluster-core-halo,
#adminStoragePanel .admin-storage-cluster-core-ring,
#adminStoragePanel .admin-storage-cluster-core-ring-fill {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

#adminStoragePanel .admin-storage-cluster-core-halo {
    inset: 10px;
    box-shadow:
        inset 0 0 0 1px rgba(120, 148, 160, 0.16),
        0 22px 38px rgba(3, 15, 20, 0.34);
}

#adminStoragePanel .admin-storage-cluster-core-ring {
    inset: 24px;
    background:
        radial-gradient(circle at center, rgba(13, 29, 36, 0) 58%, rgba(8, 18, 24, 0.92) 58.5%),
        conic-gradient(rgba(87, 109, 117, 0.18) 0turn 1turn);
    box-shadow:
        inset 0 0 0 1px rgba(120, 148, 160, 0.12),
        0 0 0 1px rgba(125, 156, 163, 0.08);
}

#adminStoragePanel .admin-storage-cluster-core-ring-fill {
    inset: 24px;
    box-shadow: inset 0 0 0 1px rgba(190, 255, 242, 0.04);
}

#adminStoragePanel .admin-storage-cluster-core-center {
    position: relative;
    width: calc(100% - 74px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at top, rgba(117, 255, 221, 0.09) 0%, transparent 28%),
        linear-gradient(180deg, rgba(8, 25, 33, 0.96) 0%, rgba(10, 30, 39, 0.92) 100%);
    border: 1px solid rgba(129, 190, 182, 0.16);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    padding: 18px;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(112, 231, 204, 0.05);
}

#adminStoragePanel .admin-storage-cluster-core-center small,
#adminStoragePanel .admin-storage-cluster-core-center span,
#adminStoragePanel .admin-storage-cluster-core-center em,
#adminStoragePanel .admin-storage-cluster-core-center b {
    font-style: normal;
    color: rgba(198, 224, 226, 0.76);
}

#adminStoragePanel .admin-storage-cluster-core-center small {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#adminStoragePanel .admin-storage-cluster-core-center strong {
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1;
    color: #effffb;
    text-shadow: 0 0 24px rgba(121, 245, 212, 0.24);
}

#adminStoragePanel .admin-storage-cluster-core-center span,
#adminStoragePanel .admin-storage-cluster-core-center em,
#adminStoragePanel .admin-storage-cluster-core-center b {
    font-size: 12px;
    line-height: 1.45;
}

#adminStoragePanel .admin-storage-orbit-node {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 72px;
    display: grid;
    gap: 4px;
    justify-items: center;
}

#adminStoragePanel .admin-storage-orbit-node-badge {
    display: none;
}

#adminStoragePanel .admin-storage-orbit-node-ring {
    width: 72px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        conic-gradient(
            var(--node-color) 0turn calc(var(--node-usage-ratio) * 1turn),
            var(--node-free-color, rgba(101, 240, 203, 0.38)) calc(var(--node-usage-ratio) * 1turn) calc(var(--node-available-end-ratio, var(--node-usage-ratio)) * 1turn),
            var(--node-guard-color, rgba(135, 170, 182, 0.14)) calc(var(--node-available-end-ratio, var(--node-usage-ratio)) * 1turn) 1turn
        );
    box-shadow:
        inset 0 0 0 1px rgba(214, 255, 247, 0.08),
        0 18px 28px rgba(3, 14, 19, 0.34);
}

#adminStoragePanel .admin-storage-orbit-node-core {
    width: calc(100% - 12px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 1px;
    background: linear-gradient(180deg, rgba(8, 27, 35, 0.98) 0%, rgba(10, 31, 39, 0.94) 100%);
    border: 1px solid rgba(123, 186, 179, 0.12);
}

#adminStoragePanel .admin-storage-orbit-node-core strong {
    color: #f2fffb;
    font-size: 15px;
    line-height: 1;
}

#adminStoragePanel .admin-storage-orbit-node-core span {
    max-width: 48px;
    color: rgba(194, 222, 224, 0.82);
    font-size: 7px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
}

#adminStoragePanel .admin-storage-orbit-node-flag {
    color: #ffbac4;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#adminStoragePanel .admin-storage-orbit-node.is-offline {
    opacity: 0.72;
}

#adminStoragePanel .admin-storage-orbit-node.is-warning .admin-storage-orbit-node-ring {
    box-shadow:
        inset 0 0 0 1px rgba(255, 218, 168, 0.14),
        0 18px 28px rgba(62, 36, 18, 0.28);
}

#adminStoragePanel .admin-storage-cluster-alert {
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 3;
    border: 1px solid rgba(255, 162, 122, 0.24);
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(58, 31, 20, 0.88);
    color: #ffd4c4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#adminStoragePanel .admin-storage-cluster-alert.is-offline {
    border-color: rgba(255, 108, 126, 0.28);
    background: rgba(68, 20, 28, 0.9);
    color: #ffd7df;
}

#adminStoragePanel .admin-storage-throughput-stack {
    display: grid;
    gap: 12px;
    align-content: start;
}

#adminStoragePanel .admin-storage-throughput-card,
#adminStoragePanel .admin-storage-cluster-meta-item {
    border: 1px solid rgba(98, 153, 160, 0.18);
    border-radius: 18px;
    padding: 14px;
    background: rgba(7, 24, 31, 0.82);
    display: grid;
    gap: 7px;
}

#adminStoragePanel .admin-storage-throughput-card span,
#adminStoragePanel .admin-storage-cluster-meta-item span,
#adminStoragePanel .admin-storage-throughput-card small,
#adminStoragePanel .admin-storage-cluster-meta-item small {
    color: rgba(196, 223, 225, 0.74);
}

#adminStoragePanel .admin-storage-throughput-card span,
#adminStoragePanel .admin-storage-cluster-meta-item span {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#adminStoragePanel .admin-storage-throughput-card strong,
#adminStoragePanel .admin-storage-cluster-meta-item strong {
    color: #effffb;
    font-size: 26px;
    line-height: 1;
}

#adminStoragePanel .admin-storage-throughput-card small,
#adminStoragePanel .admin-storage-cluster-meta-item small {
    font-size: 11px;
    line-height: 1.4;
}

#adminStoragePanel .admin-storage-node-warning {
    color: #ffd7c9;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#adminStoragePanel .admin-storage-account-item.is-warning,
#adminStoragePanel .admin-storage-account-item.is-full {
    border-color: rgba(255, 149, 116, 0.24);
}

#adminStoragePanel .admin-storage-account-item.is-full {
    border-color: rgba(255, 99, 122, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 99, 122, 0.08);
}

#adminStoragePanel .admin-storage-throughput-bar {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(156, 201, 205, 0.12);
}

#adminStoragePanel .admin-storage-throughput-bar-fill {
    width: 0%;
    height: 100%;
    min-width: 8%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9af7df 0%, #1cb79a 100%);
    box-shadow: 0 0 12px rgba(121, 245, 212, 0.32);
}

#adminStoragePanel .admin-storage-throughput-bar-fill-download {
    background: linear-gradient(90deg, #97ffe3 0%, #2ac0df 100%);
}

#adminStoragePanel .admin-storage-throughput-bar-fill-zip {
    background: linear-gradient(90deg, #d4fff0 0%, #0f8f7a 100%);
}

#adminStoragePanel .admin-storage-throughput-bar-fill-cpu {
    background: linear-gradient(90deg, #ffd26f 0%, #ff7a5c 100%);
}

#adminStoragePanel .admin-storage-throughput-bar-fill-memory {
    background: linear-gradient(90deg, #97ffe3 0%, #2ac0df 100%);
}

#adminStoragePanel .admin-storage-load-card .admin-storage-throughput-bar-fill {
    min-width: 0;
}

#adminStoragePanel .admin-storage-load-stack {
    display: grid;
    gap: 10px;
}

#adminStoragePanel .admin-storage-load-row {
    display: grid;
    gap: 6px;
}

#adminStoragePanel .admin-storage-load-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#adminStoragePanel .admin-storage-load-row-head span {
    color: rgba(196, 223, 225, 0.74);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#adminStoragePanel .admin-storage-cluster-meta {
    display: grid;
    gap: 12px;
}

#adminStoragePanel .admin-storage-window-card {
    border-color: rgba(88, 138, 144, 0.18);
}

#adminStoragePanel .admin-storage-window-head strong,
#adminStoragePanel .admin-storage-window-metrics strong {
    color: #effffb;
}

#adminStoragePanel .admin-storage-window-metrics span,
#adminStoragePanel .admin-storage-window-metrics small {
    color: rgba(197, 221, 223, 0.74);
}

#adminStoragePanel .admin-storage-window-card::after,
#adminStoragePanel .admin-storage-cluster-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 18%, transparent 82%, rgba(122, 235, 206, 0.03) 100%);
    pointer-events: none;
}

@media (max-width: 1180px) {
    #adminStoragePanel .admin-storage-hero,
    #adminStoragePanel .admin-storage-cluster-layout {
        grid-template-columns: 1fr;
    }

    #adminStoragePanel .admin-storage-cluster-map,
    #adminStoragePanel .admin-storage-cluster-stage {
        min-height: 520px;
    }
}

@keyframes reveal {
    from {
        transform: translateY(5px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 980px) {
    .subtitle-designer-card {
        width: 100%;
        max-height: calc(100vh - 20px);
        padding: 12px;
    }

    .subtitle-designer-body {
        grid-template-columns: 1fr;
    }

    .subtitle-designer-preview {
        max-width: 260px;
    }

    .subtitle-designer-preview-shell {
        width: min(100%, 320px);
        height: 420px;
    }

    .subtitle-designer-right {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .subtitle-designer-inline-grid {
        grid-template-columns: 1fr;
    }

    .layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr);
        height: auto;
        min-height: 100vh;
    }

    .sidebar {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        border-right: 0;
    }

    .panel {
        grid-column: 1;
        grid-row: 3;
        padding: 0 0 6px;
    }

    .app-topbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .app-topnav {
        justify-content: flex-start;
        gap: 16px;
    }

    .app-topbar-right {
        margin-left: 0;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .app-topbar-controls {
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
    }

    .topbar-account-btn {
        min-width: 100%;
    }

    .topbar-user-wrap {
        width: 100%;
    }

    #builderView {
        height: calc(100vh - 32px);
    }

    .layout.layout-builder-mode .panel {
        padding: 10px;
        overflow: hidden;
    }

    .layout.layout-builder-mode #builderView {
        height: calc(100vh - 20px);
    }

    .builder-ai-sidebar,
    .builder-shell.is-ai-collapsed .builder-ai-sidebar {
        min-height: 0;
        height: calc(100% - 10px);
        padding: 12px;
        align-items: stretch;
    }

    .builder-shell.is-ai-collapsed .builder-ai-sidebar-title-wrap {
        display: block;
    }

    .builder-shell.is-ai-collapsed .builder-ai-sidebar-body {
        display: flex;
    }

    .builder-shell.is-ai-collapsed .builder-ai-sidebar-head {
        justify-content: space-between;
    }

    .flow-manager-actions,
    .grid-two,
    .asset-sections,
    .node-editor-grid,
    .timeline-grid {
        grid-template-columns: 1fr;
    }

    .timeline-form-row {
        grid-template-columns: 1fr;
    }

    .timeline-stats {
        grid-template-columns: repeat(2, minmax(90px, 1fr));
    }

    .welcome-hero,
    .welcome-grid,
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .welcome-stats-grid,
    .settings-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-item-row {
        grid-template-columns: minmax(0, 1fr) 42px;
    }

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

    .admin-storage-hero,
    .admin-storage-window-grid,
    .admin-storage-window-metrics,
    .admin-storage-node-topbrands {
        grid-template-columns: 1fr;
    }

    .admin-storage-bootstrap-form {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .admin-account-actions {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-head-actions,
    .admin-filter-bar,
    .admin-inline-toggle-group {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .admin-dashboard-head-actions {
        display: grid;
    }

    .admin-filter-actions {
        justify-content: stretch;
    }

    .admin-filter-actions .ghost-btn,
    .admin-table-search {
        width: 100%;
    }

    .asset-upload-row {
        grid-template-columns: 1fr;
    }

    .builder-direct-upload {
        grid-template-columns: 1fr;
    }

    .node-form-grid {
        grid-template-columns: 1fr;
    }

    .node-row-grid {
        grid-template-columns: 1fr;
    }

    .assets-top-row,
    .node-editor-head,
    .timeline-admin-head,
    .timeline-table-head,
    .admin-dashboard-head {
        flex-direction: column;
        align-items: stretch;
    }

    .pipeline-overview-head,
    .pending-download-head,
    .recent-run-head,
    .favorite-pipeline-head,
    .settings-detail-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .video-preview {
        width: 100%;
    }

    .video-actions {
        justify-content: flex-start;
    }

    .builder-canvas-wrap {
        min-width: 0;
        height: 100%;
    }

    .builder-canvas {
        width: 1200px;
        height: 900px;
        min-width: 1200px;
        min-height: 900px;
    }

    .builder-connections {
        width: 100%;
        height: 100%;
    }
}

@media (min-width: 761px) and (max-width: 980px) {
    .layout {
        grid-template-columns: 224px minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }

    .sidebar {
        grid-column: 1;
        grid-row: 2;
        width: auto;
        min-width: 0;
    }

    .panel {
        grid-column: 2;
        grid-row: 2;
        padding: 0 2px 6px;
    }

    .app-topbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 14px;
        padding: 10px 14px;
        align-items: center;
    }

    .app-topnav {
        justify-content: center;
        flex-wrap: nowrap;
        gap: 16px;
        min-width: 0;
    }

    .app-topbar-right {
        margin-left: 0;
        flex-wrap: nowrap;
        gap: 10px;
        min-width: 0;
    }

    .app-topbar-controls {
        flex-wrap: nowrap;
        width: auto;
        min-width: 0;
        justify-content: flex-end;
        gap: 10px;
    }

    .topbar-pill {
        padding: 7px 12px;
        font-size: 10px;
    }

    .topbar-account-btn {
        width: auto;
        min-width: 168px;
    }

    .topbar-user-wrap {
        width: auto;
        min-width: 0;
    }

    .layout.layout-home-view.layout-home-authenticated .app-topbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .layout.layout-home-view.layout-home-authenticated .app-topnav {
        gap: 12px;
    }

    .layout.layout-home-view.layout-home-authenticated .topbar-pill {
        padding: 7px 10px;
        font-size: 10px;
    }

    .layout.layout-home-view.layout-home-authenticated .topbar-account-btn {
        width: 168px;
    }

    .builder-ai-sidebar {
        min-height: 0;
        height: calc(100% - 2px);
        width: min(380px, calc(100% - 18px));
        padding: 12px;
        align-items: stretch;
    }
}