:root {
    --bg: #020714;
    --panel: #07101f;
    --panel2: #091426;
    --line: #20324a;
    --cyan: #1be7ff;
    --blue: #238fff;
    --purple: #c03cff;
    --magenta: #e942ff;
    --green: #20ef9f;
    --orange: #ff9f27;
    --text: #f1f7ff;
    --muted: #8494aa;
    --danger: #ff5f7c;
    font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: #020714;
    color: var(--text);
}

button,
input,
select,
textarea {
    font: inherit;
}

.dashboard-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,rgba(2,7,20,.48),rgba(2,7,20,.72)),url('../../assets/images/admin/command-center-background.png') center top/cover no-repeat;
    filter: saturate(.92);
    transform: scale(1.01);
}

.auth-pending {
    visibility: hidden;
}

.admin-layout {
    position: relative;
    display: grid;
    grid-template-columns: 290px minmax(0,1fr);
    min-height: 100vh;
}

.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 18px 14px 18px;
    border-right: 1px solid #192740;
    background: linear-gradient(180deg,rgba(3,11,28,.97),rgba(4,11,28,.92));
    box-shadow: 18px 0 55px rgba(0,0,0,.28);
    overflow: auto;
}

.side-brand {
    height: 72px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 7px 14px;
    border-bottom: 1px solid #16243b;
}

.side-brand img {
    width: 70px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 0 7px rgba(26,224,255,.24));
}

.side-brand strong {
    font-style: italic;
    font-size: 20px;
    letter-spacing: .06em;
    background: linear-gradient(90deg,#36efff,#e08cff);
    -webkit-background-clip: text;
    color: transparent;
}

.side-brand span {
    display: block;
    color: #12e7f0;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .12em;
}

.admin-nav {
    display: grid;
    gap: 4px;
    padding: 22px 4px;
}

.admin-nav-btn {
    position: relative;
    width: 100%;
    min-height: 45px;
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 0 12px;
    background: transparent;
    color: #dbe5f2;
    font-size: 14px;
    cursor: pointer;
}

.admin-nav-btn>span {
    color: #7a9cff;
    font-size: 19px;
}

.admin-nav-btn>b {
    min-width: 24px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #6f1a89;
    border: 1px solid #d95cff;
    color: #fff;
    font-size: 10px;
    text-align: center;
}

.admin-nav-btn:hover {
    background: rgba(22,56,93,.22);
}

.admin-nav-btn.active {
    border-color: #1cc8f2;
    background: linear-gradient(90deg,rgba(9,111,149,.39),rgba(90,24,112,.39));
    box-shadow: 0 0 16px rgba(28,208,255,.18),inset 0 0 18px rgba(172,46,255,.07);
}

.crew-card {
    margin: 8px 7px 0;
    padding: 20px 16px;
    border: 1px solid #5b45dd;
    border-radius: 10px;
    background: linear-gradient(145deg,rgba(9,29,55,.86),rgba(29,10,50,.78));
    box-shadow: 0 0 25px rgba(70,38,235,.17);
    text-align: center;
}

.crew-card strong {
    display: block;
    margin-bottom: 15px;
    font-size: 21px;
    font-style: italic;
    line-height: .92;
    color: #e860ff;
    text-shadow: -2px 2px #0be5ff;
}

.crew-card p {
    margin: 0;
    color: #b9c6d4;
    font-size: 10px;
}

.crew-card span {
    display: block;
    margin: 7px 0 17px;
    color: #1ce9ff;
    font-size: 9px;
}

.crew-card a {
    display: block;
    border: 1px solid #13dff5;
    border-radius: 6px;
    padding: 11px;
    color: #eaffff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 900;
}

.admin-main {
    min-width: 0;
    padding: 0 20px 28px;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #1d2c45;
    background: rgba(2,7,20,.90);
    backdrop-filter: blur(18px);
}

.admin-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.admin-title-wrap h1 {
    margin: 0;
    font-size: 25px;
    font-style: italic;
    letter-spacing: .04em;
    white-space: nowrap;
    background: linear-gradient(90deg,#2ceaff,#f4efff 62%,#c052ff);
    -webkit-background-clip: text;
    color: transparent;
}

.data-badge {
    padding: 4px 7px;
    border-radius: 4px;
    background: rgba(255,159,39,.13);
    border: 1px solid rgba(255,159,39,.45);
    color: #ffbd63;
    font-size: 8px;
    font-weight: 900;
    white-space: nowrap;
}

.topbar-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-search {
    height: 38px;
    min-width: 335px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid #29364d;
    border-radius: 7px;
    background: #07101d;
}

.admin-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #e8f2ff;
    font-size: 11px;
}

.admin-search kbd {
    padding: 3px 6px;
    border: 1px solid #37475d;
    border-radius: 4px;
    color: #9eafc4;
    font-size: 8px;
}

.bell,
.owner-menu,
.logout-btn,
.mobile-menu {
    border: 0;
    background: transparent;
    color: #dbe7f5;
    cursor: pointer;
}

.bell {
    position: relative;
    font-size: 20px;
}

.bell b {
    position: absolute;
    right: -6px;
    top: -7px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #7d1daa;
    border: 1px solid #d94cff;
    font-size: 8px;
}

.owner-menu {
    display: flex;
    align-items: center;
    gap: 8px;
}

.owner-menu img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #12d7f4;
    object-fit: contain;
}

.owner-menu span {
    font-size: 11px;
    text-align: left;
}

.owner-menu small {
    display: block;
    color: #7e8ea4;
}

.logout-btn {
    font-size: 18px;
}

.mobile-menu {
    display: none;
}

.admin-view {
    display: none;
    padding-top: 16px;
}

.admin-view.active {
    display: block;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 14px;
}

.metric-card {
    position: relative;
    min-height: 105px;
    padding: 16px 18px;
    border: 1px solid #1b657f;
    border-radius: 8px;
    background: linear-gradient(145deg,rgba(4,20,36,.92),rgba(7,16,32,.9));
    overflow: hidden;
    box-shadow: inset 0 0 30px rgba(18,218,255,.025);
}

.metric-card span {
    display: block;
    font-size: 10px;
    font-weight: 900;
}

.metric-card strong {
    display: block;
    margin: 6px 0 7px;
    font-size: 25px;
}

.metric-card small {
    color: #1aee95;
    font-size: 9px;
}

.metric-card small em {
    color: #8392a4;
    font-style: normal;
}

.metric-card i {
    position: absolute;
    right: 17px;
    top: 34px;
    font-style: normal;
    font-size: 35px;
    opacity: .6;
}

.metric-card.blue {
    border-color: #1957a0;
}

.metric-card.purple {
    border-color: #6d297f;
}

.metric-card.teal {
    border-color: #087f83;
}

.metric-card.magenta {
    border-color: #6f2b85;
}

.overview-main-grid {
    display: grid;
    grid-template-columns: 1.03fr 1fr;
    gap: 14px;
    margin-top: 14px;
}

.dash-panel {
    border: 1px solid #20344f;
    border-radius: 9px;
    background: linear-gradient(145deg,rgba(5,15,30,.91),rgba(7,14,28,.87));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018),0 9px 25px rgba(0,0,0,.10);
    overflow: hidden;
}

.panel-head {
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 13px;
    border-bottom: 1px solid #1b2e46;
}

.panel-head h2 {
    margin: 0;
    margin-right: auto;
    font-size: 12px;
}

.mini-tabs {
    display: flex;
    gap: 4px;
}

.mini-tabs button,
.outline-action,
.text-action,
.panel-head select {
    height: 28px;
    padding: 0 11px;
    border: 1px solid #284461;
    border-radius: 5px;
    background: #071426;
    color: #c6d2e1;
    font-size: 9px;
    cursor: pointer;
}

.mini-tabs button.active {
    border-color: #10d9ff;
    color: #e9feff;
    background: rgba(0,132,174,.2);
    box-shadow: 0 0 8px rgba(0,216,255,.13);
}

.outline-action {
    border-color: #167bb1;
    color: #44dfff;
}

.text-action {
    border: 0;
    color: #30deff;
    background: transparent;
}

.table-wrap {
    overflow: auto;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9px;
    white-space: nowrap;
}

.orders-table th {
    height: 35px;
    padding: 0 9px;
    color: #9eafc1;
    text-align: left;
    font-size: 8px;
    border-bottom: 1px solid #1c2d44;
}

.orders-table td {
    height: 38px;
    padding: 0 9px;
    border-bottom: 1px solid #17283c;
    color: #d8e3ef;
}

.orders-table tbody tr {
    cursor: pointer;
}

.orders-table tbody tr:hover {
    background: rgba(24,109,150,.11);
}

.orders-table tbody tr.selected {
    outline: 1px solid #09d9ff;
    outline-offset: -2px;
    background: linear-gradient(90deg,rgba(0,132,180,.19),rgba(46,13,76,.18));
    box-shadow: inset 0 0 15px rgba(0,222,255,.06);
}

.order-id {
    color: #20eaff;
    font-weight: 900;
}

.tag {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid currentColor;
    font-size: 8px;
    background: rgba(0,0,0,.18);
}

.tag.green {
    color: #20ef9f;
}

.tag.orange {
    color: #ff9f27;
}

.tag.blue {
    color: #2daeff;
}

.tag.purple {
    color: #d251ff;
}

.tag.cyan {
    color: #23ebf4;
}

.tag.grey {
    color: #8fa0b4;
}

.table-foot {
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    color: #8697aa;
    font-size: 9px;
}

.pagination {
    display: flex;
    gap: 5px;
    align-items: center;
}

.pagination button {
    width: 29px;
    height: 26px;
    border: 1px solid #253b55;
    border-radius: 4px;
    background: #071222;
    color: #93a5b9;
    font-size: 9px;
}

.pagination button.active {
    border-color: #15dafa;
    color: #fff;
    background: #075069;
}

.order-details-panel {
    min-height: 350px;
}

.status-dot {
    color: #20eaa0;
    font-size: 10px;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1.16fr .92fr .9fr .95fr;
}

.detail-cell {
    min-height: 101px;
    padding: 12px;
    border-right: 1px solid #1e314a;
    border-bottom: 1px solid #1e314a;
}

.detail-cell h3 {
    margin: 0 0 8px;
    color: #e8f1fb;
    font-size: 9px;
}

.detail-cell p {
    margin: 0;
    color: #b7c4d2;
    font-size: 9px;
    line-height: 1.55;
    white-space: pre-line;
}

.notes-cell {
    grid-column: 1/4;
    min-height: 93px;
    position: relative;
}

.notes-cell button {
    position: absolute;
    right: 10px;
    bottom: 8px;
    border: 1px solid #31435a;
    border-radius: 4px;
    background: #071426;
    color: #c1cedc;
    font-size: 8px;
}

.method-cell {
    grid-column: 4;
    grid-row: 2/4;
    text-align: center;
    border: 1px solid #b42fde;
    box-shadow: inset 0 0 23px rgba(177,51,234,.12);
}

.method-cell strong {
    display: block;
    margin-top: 15px;
    color: #e65bff;
    font-size: 18px;
}

.method-cell small {
    display: block;
    margin: 8px 0 12px;
    color: #bbc5d3;
    font-size: 9px;
}

.method-cell button {
    border: 1px solid #ad3bd2;
    border-radius: 4px;
    background: rgba(90,22,103,.32);
    color: #e9bcff;
    font-size: 8px;
    padding: 6px 8px;
}

.overview-lower-grid {
    display: grid;
    grid-template-columns: 320px 318px minmax(0,1fr);
    gap: 14px;
    margin-top: 14px;
}

.shirt-preview-area {
    min-height: 298px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2px;
    padding: 8px;
    background: radial-gradient(circle at center,rgba(0,176,224,.12),transparent 55%),linear-gradient(rgba(12,70,100,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(12,70,100,.16) 1px,transparent 1px);
    background-size: auto,28px 28px,28px 28px;
}

.admin-shirt-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
}

.admin-shirt-stage>img:first-child {
    width: 100%;
    max-height: 250px;
    object-fit: contain;
}

.preview-artwork {
    position: absolute;
    width: 38%!important;
    max-height: 70px!important;
    object-fit: contain;
    top: 37%;
}

.back-preview-copy {
    position: absolute;
    top: 34%;
    text-align: center;
    font-size: 16px;
    font-weight: 900;
    line-height: .98;
    color: #34ddff;
}

.back-preview-copy b {
    color: #f256ff;
}

.back-preview-copy em {
    color: #ff386e;
    font-style: normal;
}

.production-actions-panel {
    min-height: 342px;
}

.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 15px;
}

.action-grid button {
    min-height: 43px;
    border: 1px solid #147bb3;
    border-radius: 5px;
    background: linear-gradient(145deg,#07192d,#061120);
    color: #8feeff;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.action-grid button:hover {
    filter: brightness(1.18);
}

.action-grid .wide {
    grid-column: 1/-1;
    min-height: 47px;
}

.action-grid .primary {
    border-color: #b33ae0;
    color: #ee80ff;
    background: rgba(72,22,96,.22);
}

.action-grid .success {
    border-color: #15b97a;
    color: #47f4b4;
}

.action-status {
    min-height: 19px;
    margin: 0 15px;
    color: #50eaff;
    font-size: 9px;
}

.overview-right-stack {
    display: grid;
    grid-template-rows: 1fr .92fr;
    gap: 14px;
}

.profit-mini-grid {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 5px;
    min-height: 156px;
}

.profit-list {
    padding: 13px;
}

.profit-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: #bac6d4;
    font-size: 9px;
}

.profit-line strong {
    color: #e5eef8;
}

.profit-line.net strong {
    color: #39ef90;
    font-size: 13px;
}

.profit-chart {
    padding: 8px 11px;
}

.profit-chart svg {
    width: 100%;
    height: 135px;
    overflow: visible;
}

.gridline {
    stroke: #26364d;
    stroke-width: 1;
}

.activity-list {
    padding: 5px 13px;
}

.activity-row {
    display: grid;
    grid-template-columns: 70px 16px 1fr auto;
    align-items: center;
    gap: 6px;
    min-height: 29px;
    border-bottom: 1px solid #1a2a3f;
    color: #a8b5c4;
    font-size: 9px;
}

.activity-row i {
    width: 8px;
    height: 8px;
    border: 2px solid #11d8ff;
    border-radius: 50%;
}

.activity-row small {
    color: #74859a;
}

.view-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin: 2px 0 15px;
}

.view-heading span {
    color: #26e6ff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
}

.view-heading h2 {
    margin: 2px 0 3px;
    font-size: 25px;
}

.view-heading p {
    margin: 0;
    color: #8395aa;
    font-size: 10px;
}

.primary-view-action {
    height: 38px;
    padding: 0 14px;
    border: 1px solid #c643ef;
    border-radius: 6px;
    background: linear-gradient(90deg,rgba(14,120,156,.45),rgba(101,30,124,.55));
    color: #fff;
    font-size: 9px;
    font-weight: 900;
}

.full-panel {
    min-height: 560px;
}

.orders-toolbar {
    display: flex;
    gap: 9px;
    padding: 14px;
    border-bottom: 1px solid #1d3048;
}

.orders-toolbar input,
.orders-toolbar select {
    height: 37px;
    border: 1px solid #2a405c;
    border-radius: 6px;
    background: #071222;
    color: #dbe6f3;
    padding: 0 10px;
    font-size: 10px;
}

.orders-toolbar input {
    flex: 1;
}

.table-wrap.tall {
    max-height: 620px;
}

.orders-table.full {
    font-size: 10px;
}

.orders-table.full td {
    height: 45px;
}

.production-board {
    display: grid;
    grid-template-columns: repeat(4,minmax(220px,1fr));
    gap: 12px;
}

.kanban-column {
    min-height: 610px;
    padding: 12px;
    border: 1px solid #233a55;
    border-radius: 9px;
    background: rgba(5,15,29,.82);
}

.kanban-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px;
    color: #dce9f8;
    font-size: 11px;
    font-weight: 900;
}

.kanban-head b {
    padding: 3px 7px;
    border-radius: 999px;
    background: #0d334c;
    color: #4aeaff;
}

.kanban-card {
    margin-bottom: 9px;
    padding: 12px;
    border: 1px solid #24425e;
    border-radius: 7px;
    background: linear-gradient(145deg,#07172a,#081222);
    cursor: pointer;
}

.kanban-card strong {
    display: block;
    color: #22e9ff;
    font-size: 10px;
}

.kanban-card span {
    display: block;
    margin: 5px 0;
    color: #d4deea;
    font-size: 10px;
}

.kanban-card small {
    color: #8598ad;
    font-size: 8px;
}

.design-admin-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(240px,1fr));
    gap: 13px;
}

.design-admin-card {
    border: 1px solid #223b58;
    border-radius: 9px;
    overflow: hidden;
    background: #07111f;
}

.design-admin-image {
    height: 220px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle,rgba(24,126,165,.17),transparent 55%),#050e1a;
}

.design-admin-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.design-admin-copy {
    padding: 12px;
}

.design-admin-copy strong {
    font-size: 11px;
}

.design-admin-copy p {
    margin: 7px 0;
    color: #8294a8;
    font-size: 9px;
}

.method-chip {
    display: inline-flex;
    padding: 5px 8px;
    border: 1px solid #b83de0;
    border-radius: 4px;
    color: #ef7cff;
    font-size: 8px;
}

.customers-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 14px;
}

.customer-directory {
    padding: 10px 14px;
}

.customer-row {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr auto;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #1d2e44;
    font-size: 9px;
}

.customer-row strong {
    color: #eef7ff;
}

.customer-row span {
    color: #92a2b5;
}

.review-moderation-list {
    padding: 12px;
    display: grid;
    gap: 10px;
}

.review-admin-card {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 9px;
    border: 1px solid #243d5b;
    border-radius: 7px;
}

.review-admin-card img {
    width: 96px;
    height: 78px;
    object-fit: cover;
    border-radius: 5px;
}

.review-admin-card strong {
    display: block;
    font-size: 10px;
}

.review-admin-card p {
    margin: 4px 0;
    color: #9aabba;
    font-size: 8px;
}

.review-admin-actions {
    display: grid;
    gap: 6px;
}

.review-admin-actions button {
    padding: 6px 9px;
    border-radius: 4px;
    background: #07182a;
    color: #e7f4ff;
    font-size: 8px;
}

.approve-review {
    border: 1px solid #18ba79;
}

.deny-review {
    border: 1px solid #e05476;
}

.shipping-list {
    padding: 12px;
}

.shipping-row {
    display: grid;
    grid-template-columns: 110px 1fr 150px 140px 130px;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    border-bottom: 1px solid #1b2e44;
    font-size: 10px;
}

.shipping-row strong {
    color: #22e9ff;
}

.shipping-row button {
    height: 31px;
    border: 1px solid #1c87bc;
    border-radius: 4px;
    background: #07172a;
    color: #50e8ff;
    font-size: 8px;
}

.profit-view-grid {
    display: grid;
    grid-template-columns: minmax(0,1.75fr) 370px;
    gap: 14px;
}

.profit-big-top {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    padding: 18px;
}

.profit-big-top div {
    padding: 14px;
    border: 1px solid #23405d;
    border-radius: 7px;
    background: #071426;
}

.profit-big-top span {
    display: block;
    color: #93a4b8;
    font-size: 9px;
}

.profit-big-top strong {
    display: block;
    margin-top: 5px;
    font-size: 24px;
}

.large-profit-chart {
    padding: 10px 20px 20px;
}

.large-profit-chart svg {
    width: 100%;
    height: 290px;
}

.cost-editor {
    padding-bottom: 16px;
}

.cost-editor form {
    display: grid;
    gap: 10px;
    padding: 15px;
}

.cost-editor label {
    display: grid;
    gap: 5px;
    color: #9cacbf;
    font-size: 9px;
}

.cost-editor input {
    height: 38px;
    border: 1px solid #2b405a;
    border-radius: 5px;
    background: #071222;
    color: #fff;
    padding: 0 9px;
}

.cost-editor button,
.settings-card button {
    height: 39px;
    border: 1px solid #2ce2ff;
    border-radius: 5px;
    background: rgba(10,112,145,.28);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
}

.cost-editor>p {
    margin: 0 15px;
    color: #71859b;
    font-size: 8px;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(240px,1fr));
    gap: 13px;
}

.inventory-card {
    padding: 15px;
    border: 1px solid #233c57;
    border-radius: 9px;
    background: #07111f;
}

.inventory-card h3 {
    margin: 0 0 10px;
    font-size: 11px;
}

.stock-row {
    display: grid;
    grid-template-columns: 1fr 80px;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    color: #9aabba;
    font-size: 9px;
}

.stock-row input {
    height: 31px;
    border: 1px solid #2d4561;
    border-radius: 4px;
    background: #061321;
    color: #fff;
    padding: 0 8px;
}

.coupon-admin-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
}

.gold-ticket,
.extras-price-card {
    min-height: 190px;
    padding: 30px;
    border-radius: 14px;
}

.gold-ticket {
    position: relative;
    overflow: hidden;
    border: 1px solid #ffd963;
    background: linear-gradient(115deg,#7d4d00,#e6a71d 20%,#fff0a4 36%,#cc8b10 55%,#ffdb62 74%,#9d6104);
    color: #281900;
    box-shadow: 0 0 24px rgba(255,193,42,.19);
}

.gold-ticket:after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px dashed rgba(78,44,0,.45);
    border-radius: 9px;
}

.gold-ticket span,
.extras-price-card span {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}

.gold-ticket strong,
.extras-price-card strong {
    display: block;
    margin: 18px 0 9px;
    font-size: 24px;
}

.gold-ticket p,
.extras-price-card p {
    font-size: 10px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
}

.settings-card {
    padding: 18px;
}

.settings-card h3 {
    margin: 0 0 14px;
    font-size: 12px;
}

.settings-card p {
    color: #98a9bc;
    font-size: 9px;
    line-height: 1.55;
}

.setting-rule {
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid #0f9ea2;
    border-radius: 7px;
    background: rgba(10,111,117,.10);
}

.setting-rule strong {
    display: block;
    color: #37f0e7;
    font-size: 13px;
}

.setting-rule span {
    display: block;
    margin-top: 4px;
    color: #a6b7c8;
    font-size: 9px;
}

.setting-rule.purple {
    border-color: #a43dcc;
    background: rgba(104,30,128,.12);
}

.setting-rule.purple strong {
    color: #e453ff;
}

.warning {
    color: #ffbe68!important;
}

.muted {
    color: #788ba1;
    font-size: 9px;
}

.admin-toast {
    position: fixed;
    z-index: 90;
    right: 22px;
    bottom: 20px;
    max-width: 360px;
    padding: 11px 14px;
    border: 1px solid #2bdff5;
    border-radius: 7px;
    background: rgba(4,17,31,.94);
    color: #eaffff;
    font-size: 10px;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: .18s;
}

.admin-toast.show {
    opacity: 1;
    transform: none;
}

/* LOGIN */
.admin-login-page {
    min-height: 100vh;
    overflow: hidden;
    background: #020714;
}

.admin-login-grid {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 30%,rgba(37,115,190,.20),transparent 28%),radial-gradient(circle at 65% 75%,rgba(164,39,222,.15),transparent 30%),linear-gradient(rgba(22,75,112,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(22,75,112,.13) 1px,transparent 1px);
    background-size: auto,auto,46px 46px,46px 46px;
    transform: perspective(700px) rotateX(58deg) scale(1.5);
    transform-origin: bottom;
}

.admin-login-wrap {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
}

.admin-login-card {
    width: min(430px,100%);
    padding: 32px;
    border: 1px solid #284561;
    border-radius: 15px;
    background: linear-gradient(145deg,rgba(5,18,34,.95),rgba(17,8,31,.93));
    box-shadow: 0 30px 80px rgba(0,0,0,.43),0 0 34px rgba(34,209,255,.10),inset 0 1px 0 rgba(255,255,255,.04);
    text-align: center;
}

.login-logo {
    width: 125px;
    height: 95px;
    object-fit: contain;
}

.login-kicker {
    display: block;
    color: #27eaff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em;
}

.admin-login-card h1 {
    margin: 4px 0 7px;
    font-style: italic;
    font-size: 29px;
    background: linear-gradient(90deg,#31edff,#f4efff,#d45bff);
    -webkit-background-clip: text;
    color: transparent;
}

.admin-login-card>p {
    margin: 0 auto 20px;
    color: #899bad;
    font-size: 10px;
    max-width: 300px;
    line-height: 1.5;
}

.admin-login-form {
    display: grid;
    gap: 11px;
    text-align: left;
}

.admin-login-form label {
    display: grid;
    gap: 5px;
    color: #bdcadd;
    font-size: 9px;
    font-weight: 800;
}

.admin-login-form input {
    height: 44px;
    border: 1px solid #34536f;
    border-radius: 7px;
    background: #051221;
    color: #fff;
    padding: 0 12px;
    outline: none;
}

.admin-login-form input:focus {
    border-color: #24e7ff;
    box-shadow: 0 0 0 3px rgba(36,231,255,.07);
}

.admin-login-form button {
    height: 45px;
    border: 1px solid #22e9ff;
    border-radius: 7px;
    background: linear-gradient(90deg,rgba(5,122,160,.75),rgba(116,35,141,.75));
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    cursor: pointer;
}

.login-status {
    min-height: 15px;
    margin: 0!important;
    color: #ff8198!important;
    font-size: 9px!important;
}

.back-store {
    display: inline-block;
    margin-top: 15px;
    color: #6eefff;
    text-decoration: none;
    font-size: 9px;
}

@media (max-width:1250px){
    .admin-layout {
        grid-template-columns: 235px minmax(0,1fr);
    }

    .admin-sidebar {
        padding-left: 9px;
        padding-right: 9px;
    }

    .overview-main-grid {
        grid-template-columns: 1fr;
    }

    .overview-lower-grid {
        grid-template-columns: 1fr 1fr;
    }

    .overview-right-stack {
        grid-column: 1/-1;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
    }

    .metric-grid {
        grid-template-columns: repeat(3,1fr);
    }

    .admin-search {
        min-width: 240px;
    }

    .admin-title-wrap h1 {
        font-size: 19px;
    }

    .profit-view-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width:820px){
    .admin-layout {
        display: block;
    }

    .admin-sidebar {
        position: fixed;
        z-index: 60;
        left: -260px;
        width: 250px;
        transition: .2s;
    }

    .admin-sidebar.open {
        left: 0;
    }

    .admin-main {
        padding: 0 11px 20px;
    }

    .mobile-menu {
        display: block;
    }

    .admin-topbar {
        height: auto;
        min-height: 64px;
        flex-wrap: wrap;
        padding: 9px 0;
    }

    .admin-title-wrap h1 {
        font-size: 15px;
    }

    .data-badge {
        display: none;
    }

    .topbar-tools {
        width: 100%;
    }

    .admin-search {
        flex: 1;
        min-width: 0;
    }

    .owner-menu span {
        display: none;
    }

    .metric-grid {
        grid-template-columns: 1fr 1fr;
    }

    .overview-lower-grid,
    .overview-right-stack,
    .customers-layout,
    .settings-grid,
    .coupon-admin-grid,
    .inventory-grid {
        grid-template-columns: 1fr;
    }

    .overview-right-stack {
        grid-column: auto;
    }

    .detail-grid {
        grid-template-columns: 1fr 1fr;
    }

    .notes-cell {
        grid-column: 1/-1;
    }

    .method-cell {
        grid-column: 1/-1;
        grid-row: auto;
    }

    .design-admin-grid {
        grid-template-columns: 1fr 1fr;
    }

    .production-board {
        grid-template-columns: 1fr;
    }

    .profit-mini-grid {
        grid-template-columns: 1fr;
    }

    .shipping-row {
        grid-template-columns: 90px 1fr 100px;
    }

    .shipping-row>*:nth-child(4),
    .shipping-row>*:nth-child(5) {
        display: none;
    }
}

@media (max-width:520px){
    .metric-grid {
        grid-template-columns: 1fr;
    }

    .overview-lower-grid,
    .design-admin-grid {
        grid-template-columns: 1fr;
    }

    .shirt-preview-area {
        min-height: 250px;
    }

    .topbar-tools .bell,
    .topbar-tools .owner-menu {
        display: none;
    }

    .admin-search kbd {
        display: none;
    }

    .admin-title-wrap h1 {
        font-size: 13px;
    }

    .show-mobile-hide {
        display: none;
    }
}

.standard-method-badge {
    display: inline-flex;
    margin-top: 2px;
    padding: 5px 8px;
    border: 1px solid rgba(50,234,187,.46);
    border-radius: 999px;
    color: #4ff1bd;
    background: rgba(12,93,70,.16);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
}

.method-cell strong {
    font-size: 14px!important;
}

.production-config-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.ops-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
    color: #9fb0c2;
    font-size: 9px;
    line-height: 1.45;
}

.ops-list li {
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(43,66,91,.55);
}

.ops-list b {
    color: #e8f6ff;
}

@media (max-width:1100px){
    .production-config-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:820px){
    .production-config-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Dashboard responsive background, particles and layout refinements ===== */
.dashboard-page {
    --dashboard-bg-image: url('../../assets/images/admin/command-center-background.png');
    --dashboard-bg-shift-x: 0px;
    --dashboard-bg-shift-y: 0px;
    --dashboard-panel-shift-x: 0px;
    --dashboard-panel-shift-y: 0px;
    overflow-x: hidden;
}

.dashboard-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 0%, rgba(55,208,255,.08), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(160,55,240,.10), transparent 28%),
    linear-gradient(180deg,rgba(2,7,20,.12),rgba(2,7,20,.28));
}

.dashboard-bg {
    background: linear-gradient(180deg,rgba(2,7,20,.46),rgba(2,7,20,.76)),var(--dashboard-bg-image) center top/cover no-repeat;
    transform: translate3d(var(--dashboard-bg-shift-x),var(--dashboard-bg-shift-y),0) scale(1.04);
    will-change: transform;
}

.dashboard-particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.dashboard-particles span {
    position: absolute;
    display: block;
    width: var(--size,3px);
    height: var(--size,3px);
    left: var(--left,50%);
    top: var(--top,50%);
    border-radius: 999px;
    background: rgba(85,230,255,.82);
    box-shadow: 0 0 8px rgba(55,225,255,.45),0 0 18px rgba(204,78,255,.2);
    opacity: .45;
    animation: dashboardParticleFloat var(--duration,18s) linear infinite;
    animation-delay: var(--delay,0s);
}

.dashboard-particles span:nth-child(3n) {
    background: rgba(214,79,255,.72);
}

.dashboard-particles span:nth-child(4n) {
    background: rgba(46,240,168,.7);
}

@keyframes dashboardParticleFloat{
    0% {
        transform: translate3d(0,0,0) scale(.75);
        opacity: 0;
    }

    12% {
        opacity: .45;
    }

    65% {
        opacity: .62;
    }

    100% {
        transform: translate3d(var(--drift-x,18px),-120px,0) scale(1.18);
        opacity: 0;
    }
}

.admin-layout,
.admin-main,
.admin-view,
.dash-panel,
.metric-card,
.admin-topbar,
.admin-sidebar {
    position: relative;
    z-index: 1;
}

.admin-topbar {
    background: rgba(2,7,20,.84);
}

.metric-grid {
    grid-template-columns: repeat(5,minmax(155px,1fr));
}

.overview-main-grid {
    grid-template-columns: minmax(0,1.08fr) minmax(400px,.92fr);
}

.overview-lower-grid {
    grid-template-columns: minmax(280px,.86fr) minmax(280px,.86fr) minmax(0,1fr);
}

.dash-panel,
.metric-card {
    backdrop-filter: blur(16px);
}

.shirt-preview-area {
    min-height: 318px;
}

@media (max-width:1350px){
    .metric-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .overview-main-grid {
        grid-template-columns: 1fr;
    }

    .overview-lower-grid {
        grid-template-columns: 1fr 1fr;
    }

    .overview-right-stack {
        grid-column: 1/-1;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
    }
}

@media (max-width:1120px){
    .dashboard-page {
        --dashboard-bg-image: url('../../assets/images/admin/command-center-tablet.png');
    }

    .admin-topbar {
        padding-right: 4px;
    }

    .panel-head {
        flex-wrap: wrap;
        row-gap: 8px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .orders-toolbar {
        flex-wrap: wrap;
    }

    .detail-grid {
        grid-template-columns: 1fr 1fr;
    }

    .notes-cell,
    .method-cell {
        grid-column: 1/-1;
        grid-row: auto;
    }
}

@media (max-width:820px){
    .dashboard-page {
        --dashboard-bg-image: url('../../assets/images/admin/command-center-mobile.png');
    }

    .admin-main {
        padding-inline: 11px;
    }

    .admin-view {
        padding-top: 12px;
    }

    .admin-search {
        min-width: 0;
    }

    .overview-main-grid,
    .overview-lower-grid,
    .overview-right-stack,
    .customers-layout,
    .settings-grid,
    .coupon-admin-grid,
    .inventory-grid,
    .profit-view-grid {
        grid-template-columns: 1fr;
    }

    .overview-right-stack {
        grid-column: auto;
    }

    .metric-grid {
        grid-template-columns: 1fr 1fr;
    }

    .orders-toolbar>* {
        min-width: 0;
        flex: 1 1 180px;
    }
}

@media (max-width:580px){
    .metric-grid {
        grid-template-columns: 1fr;
    }

    .admin-title-wrap {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .admin-topbar {
        gap: 10px;
    }

    .topbar-tools {
        gap: 8px;
    }

    .orders-toolbar {
        padding: 10px;
    }

    .review-admin-card {
        grid-template-columns: 1fr;
    }

    .review-admin-card img {
        width: 100%;
        height: 160px;
    }

    .customer-row,
    .shipping-row {
        grid-template-columns: 1fr;
    }

    .shipping-row>*:nth-child(4),
    .shipping-row>*:nth-child(5) {
        display: block;
    }
}

/* ===== MATCH MAIN STOREFRONT GLASS PANELS =====
   Exact glass recipe copied from the final storefront panel-shell rules.
   Dashboard-only override: index.html/site.css are not modified.
   ========================================================= */
.dashboard-page {
    --glass-bg-alpha: .42;
    --glass-bg-alpha-soft: -2.23;
    --glass-blur: 6px;
    --glass-saturation: 2.4;
    --glass-border-alpha: 3;
    --glass-highlight-alpha: .08;
}

.dashboard-page .dash-panel,
.dashboard-page .metric-card,
.dashboard-page .kanban-column,
.dashboard-page .design-admin-card,
.dashboard-page .inventory-card {
    background: linear-gradient(135deg,
    rgb(24 35 49 / var(--glass-bg-alpha)),
    rgb(8 17 29 / var(--glass-bg-alpha-soft)))!important;
    border-color: rgb(220 235 246 / var(--glass-border-alpha))!important;
    box-shadow: 0 20px 52px rgba(0,0,0,.18),
    inset 0 1px 0 rgb(255 255 255 / var(--glass-highlight-alpha)),
    inset 0 0 42px rgba(88,193,255,.024)!important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation))!important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation))!important;
}

/* Preserve the dashboard's useful accent colors while keeping the same glass body. */
.dashboard-page .metric-card.cyan {
    border-color: #1b657f!important;
}

.dashboard-page .metric-card.blue {
    border-color: #1957a0!important;
}

.dashboard-page .metric-card.purple {
    border-color: #6d297f!important;
}

.dashboard-page .metric-card.teal {
    border-color: #087f83!important;
}

.dashboard-page .metric-card.magenta {
    border-color: #6f2b85!important;
}

.dashboard-page .detail-cell,
.dashboard-page .shirt-preview-area,
.dashboard-page .kanban-card,
.dashboard-page .design-admin-image,
.dashboard-page .review-admin-card,
.dashboard-page .profit-big-top>div,
.dashboard-page .setting-rule,
.dashboard-page .stock-row input {
    background: linear-gradient(145deg,
    rgb(27 39 52 / calc(var(--glass-bg-alpha) * .72)),
    rgb(8 17 29 / calc(var(--glass-bg-alpha-soft) * .82)))!important;
    backdrop-filter: blur(calc(var(--glass-blur) * .55)) saturate(var(--glass-saturation))!important;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .55)) saturate(var(--glass-saturation))!important;
}

/* ===== Responsive dashboard background tuning v5 ===== */
.dashboard-bg {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (min-width:1121px){
    .dashboard-bg {
        transform: translate3d(var(--dashboard-bg-shift-x),var(--dashboard-bg-shift-y),0) scale(1.03);
    }
}

@media (max-width:1120px) and (min-width:821px){
    .dashboard-bg {
        background-position: center top;
        transform: translate3d(var(--dashboard-bg-shift-x),var(--dashboard-bg-shift-y),0) scale(1.02);
    }
}

@media (max-width:820px){
    .dashboard-bg {
        background-position: center top;
        transform: translate3d(var(--dashboard-bg-shift-x),var(--dashboard-bg-shift-y),0) scale(1.01);
    }
}

/* ===== v6: FULL-PAGE DASHBOARD SCROLL + HEADER-SAFE PANEL POSITIONING =====
   Dashboard only. The storefront is untouched.
   ================================================================ */
html,
body.dashboard-page {
    min-height: 100%;
    height: auto;
}

body.dashboard-page {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    background: #020714;
}

.dashboard-bg {
    position: absolute!important;
    inset: 0!important;
    width: 100%;
    min-height: 100%;
    background-color: #020714!important;
    background-position: center top!important;
    background-size: 100% auto!important;
    background-repeat: no-repeat!important;
    transform: translate3d(var(--dashboard-bg-shift-x),var(--dashboard-bg-shift-y),0)!important;
    transform-origin: center top!important;
}

.dashboard-page::before {
    position: absolute!important;
    min-height: 100%;
}

.dashboard-particles {
    position: absolute!important;
    min-height: 100%;
}

.admin-layout {
    min-height: 0!important;
    align-items: start;
}

.admin-main {
    min-height: 0;
}

/* The dashboard itself should scroll as a page rather than pinning its chrome. */
.admin-topbar {
    position: relative!important;
    top: auto!important;
}

@media (min-width:821px){
    .admin-sidebar {
        position: relative!important;
        top: auto!important;
        height: auto!important;
        min-height: 100vh;
    }
}

.dashboard-hero-spacer {
    display: block;
    width: 100%;
    pointer-events: none;
}

/* Desktop background header sits in the upper ~15vw. */
@media (min-width:1121px){
    .dashboard-hero-spacer {
        height: clamp(150px,14vw,235px);
    }
}

/* Tablet's dedicated background uses a taller header area. */
@media (max-width:1120px) and (min-width:821px){
    .dashboard-hero-spacer {
        height: clamp(205px,25vw,300px);
    }
}

/* Mobile nav remains an overlay when opened, but the actual dashboard page scrolls. */
@media (max-width:820px){
    .dashboard-hero-spacer {
        height: clamp(235px,46vw,360px);
    }

    .admin-main {
        min-height: 0!important;
    }
}

/* ===== v7: SEPARATE RESPONSIVE COMMAND HEADER + CLEAN BACKGROUNDS =====
   Dashboard only. Main storefront files are intentionally untouched.
   Header artwork now participates in normal page flow; dashboard content
   starts immediately beneath it on desktop, tablet and mobile.
   ================================================================ */
.dashboard-page {
    --dashboard-bg-image: url('../../assets/images/admin/command-center-background.png');
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: #020714;
}

.dashboard-page::before {
    position: fixed!important;
    inset: 0!important;
    min-height: 0!important;
    z-index: 0!important;
    background: radial-gradient(circle at 50% 0%,rgba(55,208,255,.05),transparent 30%),
    radial-gradient(circle at 50% 100%,rgba(160,55,240,.075),transparent 30%),
    linear-gradient(180deg,rgba(2,7,20,.035),rgba(2,7,20,.20));
}

.dashboard-bg {
    position: fixed!important;
    inset: -12px!important;
    width: auto!important;
    min-height: 0!important;
    z-index: 0!important;
    background-color: #020714!important;
    background-image: linear-gradient(180deg,rgba(2,7,20,.04),rgba(2,7,20,.25)),var(--dashboard-bg-image)!important;
    background-position: center center!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    transform: translate3d(var(--dashboard-bg-shift-x),var(--dashboard-bg-shift-y),0) scale(1.025)!important;
    transform-origin: center!important;
}

.dashboard-particles {
    position: fixed!important;
    inset: 0!important;
    min-height: 0!important;
    z-index: 1!important;
}

.dashboard-page-header {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(16px,2vw,30px) 18px clamp(6px,1.1vw,16px);
}

.dashboard-page-header img {
    display: block;
    width: min(1040px,88vw);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 7px 24px rgba(33,186,255,.13));
}

.admin-layout {
    position: relative!important;
    z-index: 2!important;
    min-height: 0!important;
    align-items: start!important;
}

.admin-main {
    min-height: 0!important;
}

.dashboard-hero-spacer {
    display: none!important;
    height: 0!important;
}

/* Keep dashboard chrome and panels in ordinary scroll flow. */
.admin-topbar {
    position: relative!important;
    top: auto!important;
}

@media (min-width:821px){
    .admin-sidebar {
        position: relative!important;
        top: auto!important;
        height: auto!important;
        min-height: 100vh;
    }
}

@media (max-width:1120px) and (min-width:821px){
    .dashboard-page {
        --dashboard-bg-image: url('../../assets/images/admin/command-center-tablet.png');
    }

    .dashboard-page-header img {
        width: min(900px,92vw);
    }
}

@media (max-width:1120px) and (min-width:821px) and (orientation:portrait){
    .dashboard-page {
        --dashboard-bg-image: url('../../assets/images/admin/command-center-mobile.png');
    }
}

@media (max-width:820px){
    .dashboard-page {
        --dashboard-bg-image: url('../../assets/images/admin/command-center-mobile.png');
    }

    .dashboard-bg {
        background-position: center center!important;
        transform: translate3d(0,0,0) scale(1.015)!important;
    }

    .dashboard-page-header {
        padding: 12px 7px 5px;
    }

    .dashboard-page-header img {
        width: min(620px,98vw);
    }

    .admin-layout {
        display: block!important;
    }

    .admin-main {
        padding-top: 0!important;
    }
}

@media (prefers-reduced-motion:reduce){
    .dashboard-bg {
        transform: none!important;
    }
}

/* ===== v11 DASHBOARD CHROME + DESIGN-ONLY PREVIEW =====
   Dashboard only. Storefront index.html is intentionally unchanged. */
/* Keep command chrome in place while dashboard content scrolls. */
.admin-topbar {
    position: sticky!important;
    top: 0!important;
    z-index: 80!important;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    background: rgba(2,7,20,.94)!important;
    backdrop-filter: blur(18px) saturate(1.12);
    box-shadow: 0 8px 24px rgba(0,0,0,.24);
}

@media (min-width:821px){
    .admin-sidebar {
        position: sticky!important;
        top: 0!important;
        height: 100vh!important;
        min-height: 100vh!important;
        z-index: 90!important;
    }
}

/* The separate command-center header now lives inside admin-main, directly under the topbar. */
.dashboard-page-header {
    position: relative!important;
    z-index: 3!important;
    width: 100%!important;
    padding: clamp(14px,1.6vw,24px) 10px clamp(8px,1vw,14px)!important;
    margin-top: 5px;
}

.dashboard-page-header img {
    width: min(980px,92%)!important;
    max-height: 150px;
    object-fit: contain;
}

/* Design Preview shows the customer's artwork only. */
.design-preview-head {
    min-height: 54px;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
}

.preview-size-control {
    display: grid;
    grid-template-columns: auto minmax(105px,170px) 48px;
    align-items: center;
    gap: 8px;
    color: #a9b9cb;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.preview-size-control input {
    width: 100%;
    accent-color: #27dfff;
}

.preview-size-control output {
    color: #e9fbff;
    text-align: right;
    font-size: 10px;
    font-weight: 900;
}

.shirt-preview-area.design-only-preview {
    min-height: 318px;
    display: grid;
    place-items: center;
    padding: 22px;
    overflow: hidden;
}

.customer-design-stage {
    width: 100%;
    min-height: 270px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.customer-design-stage .preview-artwork {
    position: relative!important;
    inset: auto!important;
    width: auto!important;
    height: auto!important;
    max-width: 76%!important;
    max-height: 250px!important;
    object-fit: contain!important;
    transform: scale(var(--admin-design-preview-scale,1));
    transform-origin: center;
    transition: transform .18s ease;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,.32));
}

/* Slightly larger dashboard-panel typography for quicker scanning. */
.admin-view .metric-card span {
    font-size: 11px;
}

.admin-view .metric-card strong {
    font-size: 27px;
}

.admin-view .metric-card small {
    font-size: 10px;
}

.admin-view .panel-head h2 {
    font-size: 14px;
}

.admin-view .mini-tabs button,
.admin-view .outline-action,
.admin-view .text-action,
.admin-view .panel-head select {
    font-size: 10px;
}

.admin-view .orders-table {
    font-size: 10px;
}

.admin-view .orders-table th {
    font-size: 9px;
}

.admin-view .tag {
    font-size: 9px;
}

.admin-view .table-foot {
    font-size: 10px;
}

.admin-view .status-dot {
    font-size: 11px;
}

.admin-view .detail-cell h3 {
    font-size: 10px;
}

.admin-view .detail-cell p {
    font-size: 10px;
}

.admin-view .method-cell strong {
    font-size: 16px!important;
}

.admin-view .method-cell small {
    font-size: 10px;
}

.admin-view .standard-method-badge {
    font-size: 8px;
}

.admin-view .profit-list,
.admin-view .activity-row,
.admin-view .action-grid button,
.admin-view .kanban-card,
.admin-view .design-admin-copy,
.admin-view .customer-row,
.admin-view .shipping-row,
.admin-view .inventory-card,
.admin-view .settings-card,
.admin-view .cost-editor,
.admin-view .review-admin-card {
    font-size: 10px;
}

@media (max-width:820px){
    .admin-topbar {
        position: sticky!important;
        top: 0!important;
        margin: 0 -11px;
        padding: 9px 11px!important;
        z-index: 80!important;
    }

    .admin-sidebar {
        position: fixed!important;
        top: 0!important;
        height: 100vh!important;
        z-index: 100!important;
    }

    .dashboard-page-header {
        padding: 10px 3px 5px!important;
    }

    .dashboard-page-header img {
        width: min(620px,98%)!important;
        max-height: 110px;
    }

    .preview-size-control {
        grid-template-columns: auto minmax(90px,1fr) 44px;
        width: 100%;
    }

    .shirt-preview-area.design-only-preview {
        min-height: 270px;
        padding: 16px;
    }

    .customer-design-stage {
        min-height: 230px;
    }

    .customer-design-stage .preview-artwork {
        max-width: 72%!important;
        max-height: 215px!important;
    }
}

/* =========================================================
   STOREFRONT CONTENT MANAGERS — v2
   SAFE TO MOVE. DO NOT RENAME IDS / DATA ATTRIBUTES.
   ========================================================= */
.content-sync-badge {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 10px;
    border: 1px solid #245a77;
    border-radius: 999px;
    background: rgba(5,28,46,.72);
    color: #62dfff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .1em;
}

.content-sync-badge.live {
    border-color: #1e9f72;
    color: #4df0b0;
    background: rgba(11,71,53,.22);
}

.content-sync-badge.local {
    border-color: #93611b;
    color: #ffc66f;
    background: rgba(116,72,10,.18);
}

.storefront-manager-panel {
    margin-bottom: 14px;
    overflow: visible;
}

.storefront-form {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.storefront-form label {
    display: grid;
    gap: 5px;
    color: #9fb0c4;
    font-size: 9px;
    font-weight: 800;
}

.storefront-form input,
.storefront-form select {
    width: 100%;
    height: 38px;
    border: 1px solid #29415e;
    border-radius: 6px;
    background: #061423;
    color: #edf8ff;
    padding: 0 10px;
    outline: none;
}

.storefront-form input:focus,
.storefront-form select:focus {
    border-color: #22dff5;
    box-shadow: 0 0 0 2px rgba(34,223,245,.09);
}

.storefront-form input[type=file] {
    padding: 7px;
    height: auto;
    min-height: 38px;
}

.storefront-form .field-hint {
    color: #687d94;
    font-size: 7px;
    font-weight: 700;
}

.design-manager-form {
    grid-template-columns: 1.25fr .8fr 1.35fr 1.25fr .55fr auto;
    align-items: end;
}

.coupon-manager-form {
    grid-template-columns: .72fr 1.35fr 1.45fr .85fr .55fr .55fr .72fr .55fr auto;
    align-items: end;
}

.manager-save-btn {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #cf46f5;
    border-radius: 6px;
    background: linear-gradient(100deg,rgba(9,123,158,.42),rgba(107,29,129,.58));
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.manager-save-btn:hover {
    filter: brightness(1.14);
}

.manager-help {
    margin: -3px 14px 14px;
    color: #70849b;
    font-size: 8px;
}

.storefront-design-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(210px,1fr));
    gap: 13px;
    margin: 0 0 26px;
}

.storefront-design-card {
    position: relative;
    border: 1px solid #22425e;
    border-radius: 9px;
    overflow: hidden;
    background: linear-gradient(145deg,#071522,#080f1d);
    box-shadow: inset 0 0 22px rgba(22,185,232,.025);
}

.storefront-design-card .storefront-image {
    height: 205px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 43%,rgba(19,148,197,.16),transparent 57%),#040d18;
}

.storefront-design-card .storefront-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.storefront-design-copy {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 11px;
}

.storefront-design-copy strong {
    display: block;
    color: #edf9ff;
    font-size: 10px;
}

.storefront-design-copy small {
    display: block;
    margin-top: 4px;
    color: #7890a6;
    font-size: 8px;
}

.manager-remove-btn {
    height: 30px;
    padding: 0 10px;
    border: 1px solid #c14564;
    border-radius: 5px;
    background: rgba(105,20,40,.18);
    color: #ff8da6;
    font-size: 8px;
    font-weight: 900;
    cursor: pointer;
}

.manager-remove-btn:hover {
    background: rgba(158,30,57,.28);
}

.subsection-heading {
    margin: 8px 0 13px;
    padding-top: 18px;
    border-top: 1px solid  rgba(41,68,94,.72);
}

.subsection-heading span {
    color: #2de2fa;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
}

.subsection-heading h3 {
    margin: 4px 0 3px;
    font-size: 16px;
}

.subsection-heading p {
    margin: 0;
    color: #788da4;
    font-size: 9px;
}

.coupon-admin-grid {
    margin-bottom: 14px;
}

.coupon-admin-card {
    position: relative;
    min-height: 190px;
}

.coupon-admin-card .coupon-admin-remove {
    position: absolute;
    z-index: 3;
    right: 18px;
    bottom: 16px;
    height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(86,45,3,.56);
    border-radius: 5px;
    background: rgba(65,36,0,.17);
    color: #3b2400;
    font-size: 8px;
    font-weight: 900;
    cursor: pointer;
}

.coupon-admin-card .coupon-admin-type {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 7px;
    border: 1px solid rgba(73,43,4,.35);
    border-radius: 999px;
    font-size: 7px;
    font-weight: 900;
}

.standalone-extras {
    max-width: 390px;
    margin-top: 4px;
}

/* Shipping cards with individual copy controls. */
.shipping-list {
    display: grid;
    gap: 10px;
}

.shipping-row {
    grid-template-columns: 95px minmax(0,1.5fr) 130px minmax(150px,.8fr) 120px;
    min-height: 0;
    padding: 12px;
    border: 1px solid #1c334c;
    border-radius: 8px;
    background: rgba(5,16,31,.66);
}

.shipping-row:last-child {
    border-bottom: 1px solid #1c334c;
}

.shipping-customer {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.shipping-copy-line {
    display: grid;
    grid-template-columns: 62px minmax(0,1fr) 52px;
    gap: 7px;
    align-items: center;
}

.shipping-copy-line b {
    color: #7890a6;
    font-size: 7px;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.shipping-copy-line span {
    min-width: 0;
    color: #dce9f5;
    font-size: 9px;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.shipping-copy-btn {
    height: 25px!important;
    border-color: #2b6584!important;
    color: #75eaff!important;
    background: rgba(6,32,50,.82)!important;
    font-size: 7px!important;
}

.shipping-order-action {
    height: 31px!important;
}

.shipping-tracking {
    color: #a4b3c3;
    font-size: 9px;
    overflow-wrap: anywhere;
}

@media (max-width:1280px){
    .design-manager-form {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .design-manager-form .manager-save-btn {
        grid-column: auto;
    }

    .coupon-manager-form {
        grid-template-columns: repeat(4,1fr);
    }

    .storefront-design-grid {
        grid-template-columns: repeat(3,minmax(210px,1fr));
    }

    .shipping-row {
        grid-template-columns: 90px minmax(0,1.5fr) 115px 140px 105px;
    }
}

@media (max-width:980px){
    .design-manager-form,
    .coupon-manager-form {
        grid-template-columns: 1fr 1fr;
    }

    .storefront-design-grid {
        grid-template-columns: 1fr 1fr;
    }

    .shipping-row {
        grid-template-columns: 88px 1fr 105px;
    }

    .shipping-tracking,
    .shipping-order-action {
        grid-column: auto;
    }
}

@media (max-width:620px){
    .design-manager-form,
    .coupon-manager-form {
        grid-template-columns: 1fr;
    }

    .storefront-design-grid {
        grid-template-columns: 1fr;
    }

    .shipping-row {
        grid-template-columns: 1fr;
    }

    .shipping-copy-line {
        grid-template-columns: 54px minmax(0,1fr) 50px;
    }

    .content-sync-badge {
        align-self: flex-start;
    }
}

@media (max-width:980px){
    .shipping-row>*:nth-child(4),
    .shipping-row>*:nth-child(5) {
        display: block!important;
    }
}

/* =========================================================
   SHIPPING TRACKING CENTER — v2
   SAFE TO MOVE: visual layout only. DO NOT RENAME DATA ATTRIBUTES.
   ========================================================= */
.shipping-row {
    grid-template-columns: 115px minmax(280px,1.35fr) minmax(360px,1fr) 105px!important;
    align-items: start!important;
    gap: 12px!important;
}

.shipping-order-meta {
    display: grid;
    gap: 9px;
    align-content: start;
}

.shipping-order-meta strong {
    color: #22e9ff;
    font-size: 10px;
}

.shipping-order-meta .tag {
    justify-self: start;
}

.shipping-tracking-editor {
    display: grid;
    grid-template-columns: 120px minmax(180px,1fr);
    gap: 8px 9px;
    align-items: end;
    padding: 10px;
    border: 1px solid #28445f;
    border-radius: 7px;
    background: rgba(4,17,31,.76);
}

.shipping-tracking-editor label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.shipping-tracking-editor label>span {
    color: #8197ad;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.shipping-tracking-editor select,
.shipping-tracking-editor input {
    width: 100%;
    height: 33px;
    border: 1px solid #31516e;
    border-radius: 5px;
    background: #061522;
    color: #eaf7ff;
    padding: 0 8px;
    font-size: 9px;
    outline: none;
}

.shipping-tracking-editor select:focus,
.shipping-tracking-editor input:focus {
    border-color: #2de8ff;
    box-shadow: 0 0 0 2px rgba(45,232,255,.08);
}

.shipping-tracking-actions {
    grid-column: 1/-1;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.shipping-tracking-actions button {
    height: 29px!important;
    padding: 0 10px!important;
    font-weight: 900!important;
}

.shipping-save-tracking {
    border-color: #24dff7!important;
    color: #79f4ff!important;
    background: rgba(10,89,119,.28)!important;
}

.shipping-mark-shipped {
    border-color: #37cf8b!important;
    color: #7df2b8!important;
    background: rgba(14,104,67,.22)!important;
}

.shipping-mark-shipped:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.shipping-tracking-editor small {
    grid-column: 1/-1;
    color: #778ca1;
    font-size: 7px;
    line-height: 1.45;
}

.shipping-order-action {
    align-self: center!important;
}

@media (max-width:1180px){
    .shipping-row {
        grid-template-columns: 100px minmax(250px,1fr) minmax(330px,1fr)!important;
    }

    .shipping-order-action {
        grid-column: 3;
        justify-self: end;
    }
}

@media (max-width:820px){
    .shipping-row {
        grid-template-columns: 1fr!important;
    }

    .shipping-order-action {
        grid-column: auto;
        justify-self: start;
    }

    .shipping-tracking-editor {
        grid-template-columns: 110px minmax(0,1fr);
    }
}

@media (max-width:520px){
    .shipping-tracking-editor {
        grid-template-columns: 1fr;
    }

    .shipping-tracking-actions,
    .shipping-tracking-editor small {
        grid-column: 1;
    }

    .shipping-tracking-actions button {
        flex: 1 1 120px;
    }
}

/* =========================================================
   OFFICIAL STOREFRONT MANAGEMENT — v2
   SAFE TO MOVE. DO NOT RENAME IDS / DATA ATTRIBUTES.
   ========================================================= */
.data-badge {
    padding: 4px 7px;
    border-radius: 4px;
    background: rgba(255,159,39,.13);
    border: 1px solid rgba(255,159,39,.45);
    color: #ffbd63;
    font-size: 8px;
    font-weight: 900;
    white-space: nowrap;
}

.data-badge.live {
    border-color: #1e9f72;
    color: #4df0b0;
    background: rgba(11,71,53,.22);
}

.content-sync-badge.local {
    border-color: #93611b;
    color: #ffc66f;
    background: rgba(116,72,10,.18);
}

.content-sync-badge.setup {
    border-color: #c14564;
    color: #ff9caf;
    background: rgba(105,20,40,.18);
}

.manager-cancel-btn {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #54667d;
    border-radius: 6px;
    background: #0a1625;
    color: #b9c7d6;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.manager-card-actions,
.coupon-admin-actions {
    position: relative;
    z-index: 4;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.manager-edit-btn,
.coupon-admin-edit {
    height: 30px;
    padding: 0 10px;
    border: 1px solid #1e89b5;
    border-radius: 5px;
    background: rgba(9,73,101,.2);
    color: #72e8ff;
    font-size: 8px;
    font-weight: 900;
    cursor: pointer;
}

.coupon-admin-actions {
    position: absolute;
    right: 18px;
    bottom: 16px;
}

.coupon-admin-card .coupon-admin-remove,
.coupon-admin-card .coupon-admin-edit {
    position: static;
    z-index: auto;
    height: 28px;
}

.coupon-admin-card .coupon-admin-edit {
    border-color: rgba(71,64,18,.52);
    background: rgba(255,255,255,.12);
    color: #3b2400;
}

.extras-manager-form {
    grid-template-columns: .8fr 1.15fr 1.5fr .72fr 1fr .55fr auto auto;
    align-items: end;
}

.extras-admin-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(220px,1fr));
    gap: 13px;
    margin: 0 0 26px;
}

.extra-admin-card {
    position: relative;
    min-height: 190px;
    padding: 22px;
    overflow: visible;
}

.extra-admin-card>span {
    display: block;
    color: #35e5ff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.extra-admin-card>strong {
    display: block;
    margin: 12px 0 5px;
    color: #f2f7ff;
    font-size: 18px;
}

.extra-admin-card>b {
    display: block;
    color: #59f0ae;
    font-size: 14px;
}

.extra-admin-card>p {
    min-height: 34px;
    color: #8fa2b8;
    font-size: 9px;
    line-height: 1.45;
}

.extra-admin-card>small {
    display: block;
    margin-bottom: 15px;
    color: #71869d;
    font-size: 8px;
}

.extra-admin-card .manager-card-actions {
    justify-content: flex-start;
}

@media (max-width:1280px){
    .extras-manager-form {
        grid-template-columns: repeat(4,1fr);
    }

    .extras-admin-grid {
        grid-template-columns: repeat(2,minmax(220px,1fr));
    }
}

@media (max-width:980px){
    .extras-manager-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:620px){
    .data-badge {
        display: none;
    }

    .extras-manager-form {
        grid-template-columns: 1fr;
    }

    .extras-admin-grid {
        grid-template-columns: 1fr;
    }

    .manager-card-actions,
    .coupon-admin-actions {
        flex-wrap: wrap;
    }
}

/* AD STUDIO */
.ad-studio-status-grid,
.ad-studio-main-grid,
.ad-library-grid {
    display: grid;
    gap: 18px;
}

.ad-studio-status-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin-bottom: 18px;
}

.studio-pillar-card h3 {
    margin: 6px 0 12px;
    font-size: 18px;
}

.studio-mini-kicker {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    color: #8edcff;
}

.studio-route-list {
    margin: 0;
    padding-left: 18px;
    color: #d6e4f2;
    line-height: 1.55;
}

.studio-route-list li + li {
    margin-top: 7px;
}

.studio-count-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin-top: 12px;
}

.studio-count-grid div {
    padding: 14px 12px;
    border-radius: 14px;
    border: 1px solid rgba(83,143,197,.28);
    background: rgba(6,17,32,.54);
    text-align: center;
}

.studio-count-grid strong {
    display: block;
    font-size: 24px;
    color: #fff;
}

.studio-count-grid span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #a9bed4;
}

.ad-studio-main-grid {
    grid-template-columns: minmax(0,1.35fr) minmax(320px,.85fr);
    align-items: start;
    margin-bottom: 18px;
}

.ad-generator-form,
.studio-library-form {
    display: grid;
    gap: 12px;
}

.form-two,
.form-three,
.ad-preview-grid,
.ad-toggle-row {
    display: grid;
    gap: 12px;
}

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

.form-three {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.ad-generator-form label,
.studio-library-form label {
    display: grid;
    gap: 7px;
    color: #dce8f5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

.ad-generator-form input,
.ad-generator-form select,
.ad-generator-form textarea,
.studio-library-form input,
.studio-library-form select,
.studio-library-form textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(82,104,129,.64);
    background: rgba(6,14,27,.74);
    color: #fff;
    font: inherit;
    resize: vertical;
}

.ad-generator-form textarea,
.studio-library-form textarea {
    min-height: 88px;
}

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

.ad-toggle-row label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(81,120,171,.36);
    background: rgba(8,18,34,.56);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
}

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

.ad-builder-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ad-preview-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin-top: 16px;
}

.prompt-preview-card,
.storyboard-preview-card {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(69,115,175,.26);
    background: rgba(6,16,31,.58);
}

.prompt-preview-card h3,
.storyboard-preview-card h3,
.library-panel h2 {
    margin: 0 0 12px;
}

#adPromptPreview {
    margin: 0;
    white-space: pre-wrap;
    color: #dce9f7;
    font-size: 12px;
    line-height: 1.6;
}

#adStoryboardPreview {
    margin: 0;
    padding-left: 18px;
    color: #dce9f7;
    font-size: 12px;
    line-height: 1.6;
}

#adStoryboardPreview li + li {
    margin-top: 9px;
}

.ad-projects-list,
.asset-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.project-card,
.asset-card,
.asset-empty {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(67,111,171,.25);
    background: rgba(8,18,35,.58);
}

.asset-empty {
    color: #aebfd0;
    font-size: 12px;
    text-align: center;
}

.asset-card-top,
.project-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.asset-card-title,
.project-card-title {
    margin: 0;
    font-size: 15px;
    color: #fff;
}

.asset-card-meta,
.project-card-meta {
    margin: 4px 0 0;
    color: #9fbbd7;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.asset-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(95,135,191,.35);
    background: rgba(9,14,24,.8);
    flex: 0 0 auto;
}

.asset-card-copy p,
.project-card-copy p,
.project-shot-list {
    margin: 10px 0 0;
    color: #d8e6f3;
    font-size: 12px;
    line-height: 1.55;
}

.project-shot-list {
    padding-left: 18px;
}

.asset-card-actions,
.project-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.asset-card-actions button,
.project-card-actions button {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(84,137,210,.32);
    background: rgba(12,26,47,.72);
    color: #e7f1fd;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    cursor: pointer;
}

.asset-card-actions button.danger,
.project-card-actions button.danger {
    border-color: rgba(255,109,154,.42);
    color: #ffd5e1;
    background: rgba(49,14,28,.72);
}

.library-panel .panel-head,
.ad-projects-panel .panel-head,
.ad-generator-panel .panel-head {
    align-items: center;
}

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

.library-panel {
    min-height: 100%;
}

.project-card .project-model-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(17,28,54,.8);
    border: 1px solid rgba(84,124,198,.34);
    color: #bfe3ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
}

@media (max-width: 1180px) {
    .ad-studio-status-grid,
    .ad-library-grid,
    .ad-studio-main-grid,
    .ad-preview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .form-two,
    .form-three,
    .ad-toggle-row,
    .studio-count-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   DA OUTLET AD STUDIO — CARD + OVERLAY UI (v5 authoritative)
   ========================================================= */
.ad-studio-view {
    position: relative;
    isolation: isolate;
    min-height: 780px;
}

.ad-studio-view::before {
    content: "";
    position: absolute;
    inset: -24px -24px auto;
    height: 760px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 78% 22%,rgba(177,44,255,.13),transparent 34%),
    radial-gradient(circle at 18% 18%,rgba(0,210,255,.10),transparent 36%),
    linear-gradient(135deg,rgba(4,12,24,.05),rgba(14,6,25,.20));
}

.ad-studio-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 26px;
}

.ad-studio-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #8fb3d3;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .18em;
}

.ad-studio-hero h2 {
    margin: 0;
    color: #2be4ff;
    font-size: clamp(30px,3vw,47px);
    line-height: 1;
    letter-spacing: .015em;
    text-shadow: 0 0 22px rgba(31,222,255,.20);
}

.ad-studio-hero h2 em {
    font-style: normal;
    color: #d148ed;
    background: linear-gradient(90deg,#8e5cff,#ff45ba);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ad-studio-hero p {
    margin: 11px 0 0;
    color: #d4dfeb;
    font-size: 16px;
}

.ad-studio-launch-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
    max-width: 1000px;
}

.ad-studio-launch-card {
    position: relative;
    display: flex;
    min-height: 220px;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px 18px;
    overflow: hidden;
    border: 1px solid rgba(87,111,139,.40);
    border-radius: 13px;
    background: linear-gradient(160deg,rgba(11,24,38,.93),rgba(8,15,27,.88));
    color: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 18px 35px rgba(0,0,0,.12);
    transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.ad-studio-launch-card::after {
    content: "";
    position: absolute;
    inset: auto -20% -50% 20%;
    height: 110px;
    background: radial-gradient(circle,rgba(74,53,255,.12),transparent 68%);
    pointer-events: none;
}

.ad-studio-launch-card:hover,
.ad-studio-launch-card:focus-visible,
.ad-studio-launch-card.active-card {
    outline: none;
    transform: translateY(-2px);
    border-color: rgba(54,217,255,.82);
    box-shadow: 0 0 0 1px rgba(26,219,255,.14),0 0 24px rgba(0,202,255,.18),inset 0 0 28px rgba(89,54,255,.06);
}

.ad-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    margin-bottom: 24px;
    padding: 0 10px;
    border: 2px solid currentColor;
    border-radius: 9px;
    color: #8c4eff;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 12px currentColor;
    box-shadow: 0 0 16px color-mix(in srgb,currentColor 22%,transparent);
}

.ad-studio-launch-card:nth-child(3n+1) .ad-card-icon {
    color: #29ddff;
}

.ad-studio-launch-card:nth-child(3n) .ad-card-icon {
    color: #ff49bf;
}

.ad-studio-launch-card strong {
    display: block;
    margin-bottom: 10px;
    color: #fff;
    font-size: 18px;
    letter-spacing: .01em;
}

.ad-studio-launch-card small {
    display: block;
    min-height: 42px;
    color: #c4d1de;
    font-size: 13px;
    line-height: 1.5;
}

.ad-card-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin-top: auto;
    padding: 0 12px;
    border: 1px solid rgba(107,130,155,.45);
    border-radius: 4px;
    background: rgba(7,16,27,.65);
    color: #d9e4ee;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}

.ad-studio-tip {
    display: flex;
    align-items: center;
    gap: 13px;
    max-width: 1000px;
    margin-top: 28px;
    padding: 14px 16px;
    border: 1px solid rgba(61,92,121,.36);
    border-radius: 10px;
    background: rgba(5,15,28,.60);
    color: #aebfd0;
    font-size: 12px;
}

.ad-studio-tip span {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(38,208,255,.48);
    border-radius: 6px;
    color: #28ddff;
    font-size: 18px;
}

.ad-studio-tip p {
    margin: 0;
    line-height: 1.5;
}

.ad-studio-overlay[hidden] {
    display: none!important;
}

.ad-studio-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 76px 34px 28px;
}

.ad-studio-overlay-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0,5,14,.58);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    cursor: default;
}

.ad-overlay-panel {
    position: relative;
    z-index: 3;
    width: min(680px,calc(100vw - 68px));
    max-height: calc(100vh - 104px);
    overflow: auto;
    padding: 22px;
    border: 1px solid rgba(60,227,255,.78);
    border-radius: 17px;
    background: radial-gradient(circle at 100% 0,rgba(207,55,255,.12),transparent 34%),
    linear-gradient(145deg,rgba(8,21,35,.96),rgba(12,12,26,.95));
    box-shadow: 0 0 0 2px rgba(207,55,255,.16),
    0 0 28px rgba(0,199,255,.17),
    0 0 44px rgba(220,57,255,.12),
    0 28px 70px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(20px) saturate(1.15);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
}

.ad-overlay-panel[hidden] {
    display: none!important;
}

.asset-overlay-panel,
.projects-overlay-panel {
    width: min(980px,calc(100vw - 68px));
}

.ad-overlay-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(105,130,157,.20);
}

.ad-overlay-head > div:first-child {
    display: flex;
    gap: 13px;
    align-items: flex-start;
}

.ad-overlay-head h3 {
    margin: 0;
    color: #fff;
    font-size: 21px;
}

.ad-overlay-head p {
    margin: 5px 0 0;
    color: #aebed0;
    font-size: 12px;
    line-height: 1.45;
}

.ad-overlay-icon {
    display: grid;
    min-width: 40px;
    height: 40px;
    padding: 0 7px;
    place-items: center;
    border: 1px solid rgba(86,221,255,.66);
    border-radius: 7px;
    color: #dbf9ff;
    font-size: 19px;
    font-weight: 900;
    box-shadow: 0 0 15px rgba(63,215,255,.10);
}

.ad-overlay-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.02);
    color: #e8edf4;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.ad-overlay-close:hover {
    background: rgba(255,255,255,.07);
}

.ad-overlay-form {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px 14px;
}

.ad-overlay-form label,
.ad-asset-form label {
    display: grid;
    gap: 7px;
    color: #dbe6f1;
    font-size: 12px;
    font-weight: 800;
}

.ad-overlay-form input,
.ad-overlay-form select,
.ad-overlay-form textarea,
.ad-asset-form input,
.ad-asset-form select,
.ad-asset-form textarea {
    width: 100%;
    min-height: 43px;
    padding: 10px 12px;
    border: 1px solid rgba(83,107,134,.53);
    border-radius: 7px;
    background: rgba(9,18,31,.80);
    color: #fff;
    font: inherit;
    outline: none;
}

.ad-overlay-form textarea,
.ad-asset-form textarea {
    min-height: 92px;
    resize: vertical;
}

.ad-overlay-form input:focus,
.ad-overlay-form select:focus,
.ad-overlay-form textarea:focus,
.ad-asset-form input:focus,
.ad-asset-form select:focus,
.ad-asset-form textarea:focus {
    border-color: rgba(62,218,255,.84);
    box-shadow: 0 0 0 2px rgba(47,212,255,.07);
}

.ad-wide-field {
    grid-column: 1/-1;
}

.ad-overlay-switches {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ad-overlay-switches label {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid rgba(83,105,134,.32);
    border-radius: 7px;
    background: rgba(8,17,29,.52);
}

.ad-overlay-switches input {
    width: 15px;
    min-height: 0;
    height: 15px;
    padding: 0;
}

.ad-overlay-actions {
    display: flex;
    gap: 10px;
}

.ad-primary-action,
.ad-secondary-action {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .05em;
    cursor: pointer;
}

.ad-primary-action {
    flex: 1;
    border: 1px solid rgba(67,223,255,.68);
    background: linear-gradient(100deg,#13c9f1,#7149f3 54%,#e031b7);
    color: #fff;
    box-shadow: 0 0 20px rgba(118,69,246,.18);
}

.ad-secondary-action {
    border: 1px solid rgba(104,128,155,.46);
    background: rgba(8,18,31,.76);
    color: #e5edf5;
}

.ad-overlay-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.ad-overlay-preview > div {
    padding: 14px;
    border: 1px solid rgba(75,105,140,.28);
    border-radius: 9px;
    background: rgba(5,14,27,.55);
}

.ad-overlay-preview h4,
.ad-library-head h4 {
    margin: 0 0 10px;
    color: #f2f7fb;
    font-size: 12px;
    letter-spacing: .08em;
}

#adPromptPreview {
    margin: 0;
    white-space: pre-wrap;
    color: #c9d9e7;
    font-size: 11px;
    line-height: 1.55;
}

#adStoryboardPreview {
    margin: 0;
    padding-left: 18px;
    color: #cbdbe8;
    font-size: 11px;
    line-height: 1.55;
}

#adStoryboardPreview li+li {
    margin-top: 7px;
}

.ad-asset-overlay-grid {
    display: grid;
    grid-template-columns: minmax(290px,.85fr) minmax(0,1.15fr);
    gap: 18px;
    align-items: start;
}

.ad-asset-form {
    display: grid;
    gap: 11px;
    padding: 16px;
    border: 1px solid rgba(76,104,136,.27);
    border-radius: 11px;
    background: rgba(6,15,28,.52);
}

.ad-upload-preview {
    display: grid;
    min-height: 150px;
    place-items: center;
    overflow: hidden;
    border: 1px dashed rgba(83,183,222,.43);
    border-radius: 9px;
    background: linear-gradient(135deg,rgba(8,20,35,.82),rgba(18,9,30,.78));
    color: #7d9ab6;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.ad-upload-preview img {
    width: 100%;
    max-height: 250px;
    object-fit: contain;
    display: block;
}

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

.asset-list,
.ad-projects-list {
    display: grid;
    gap: 10px;
}

.asset-card,
.project-card,
.asset-empty {
    padding: 13px;
    border: 1px solid rgba(70,101,136,.25);
    border-radius: 10px;
    background: linear-gradient(145deg,rgba(8,18,31,.78),rgba(7,13,23,.72));
}

.asset-empty {
    color: #91a8bf;
    text-align: center;
    font-size: 12px;
}

.asset-card-top,
.project-card-top {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: flex-start;
}

.asset-card-copy,
.project-card-copy {
    min-width: 0;
}

.asset-card-title,
.project-card-title {
    margin: 0;
    color: #fff;
    font-size: 14px;
}

.asset-card-meta,
.project-card-meta {
    margin-top: 4px;
    color: #7fa5c8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.asset-card-copy p,
.project-card-copy p {
    margin: 8px 0 0;
    color: #c7d5e2;
    font-size: 11px;
    line-height: 1.5;
}

.asset-thumb {
    width: 74px;
    height: 74px;
    flex: 0 0 auto;
    object-fit: cover;
    border: 1px solid rgba(80,132,177,.35);
    border-radius: 8px;
    background: #050b13;
}

.asset-card-actions,
.project-card-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.asset-card-actions button,
.project-card-actions button {
    min-height: 31px;
    padding: 0 10px;
    border: 1px solid rgba(72,124,176,.35);
    border-radius: 6px;
    background: rgba(9,24,42,.76);
    color: #dbeaf7;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .05em;
    cursor: pointer;
}

.asset-card-actions button.danger,
.project-card-actions button.danger {
    border-color: rgba(245,92,139,.34);
    background: rgba(46,12,26,.72);
    color: #ffd4e0;
}

.project-model-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 0 9px;
    border: 1px solid rgba(95,94,226,.35);
    border-radius: 999px;
    color: #d8dcff;
    background: rgba(28,25,65,.54);
    font-size: 9px;
    font-weight: 900;
    white-space: nowrap;
}

.project-shot-list {
    margin: 9px 0 0;
    padding-left: 18px;
    color: #c7d7e5;
    font-size: 11px;
    line-height: 1.5;
}

.ad-projects-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

body.ad-overlay-open {
    overflow: hidden;
}

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

    .ad-studio-tip {
        max-width: none;
    }
}

@media (max-width:820px) {
    .ad-studio-hero {
        flex-direction: column;
    }

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

    .ad-studio-launch-card {
        min-height: 185px;
    }

    .ad-studio-overlay {
        padding: 18px 10px;
        align-items: center;
    }

    .ad-overlay-panel,
    .asset-overlay-panel,
    .projects-overlay-panel {
        width: 100%;
        max-height: calc(100vh - 36px);
        border-radius: 14px;
    }

    .ad-overlay-form,
    .ad-overlay-preview,
    .ad-asset-overlay-grid {
        grid-template-columns: 1fr;
    }

    .ad-wide-field {
        grid-column: auto;
    }

    .ad-overlay-actions {
        flex-direction: column;
    }
}

.ad-upload-preview.has-images {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
    padding: 6px;
    place-items: stretch;
}

.ad-upload-preview.has-images img {
    width: 100%;
    height: 112px;
    max-height: none;
    object-fit: cover;
    border-radius: 6px;
}

/* =========================================================
   DA OUTLET AD STUDIO — ROUGH-CUT VIDEO EDITOR (v6)
   ========================================================= */
.ad-video-editor-shell {
    max-width: 1000px;
    margin-top: 24px;
    padding: 18px;
    border: 1px solid rgba(74,120,165,.42);
    border-radius: 16px;
    background: linear-gradient(155deg,rgba(8,20,37,.92),rgba(8,12,25,.90)),
    radial-gradient(circle at 82% 10%,rgba(197,54,255,.10),transparent 34%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04),0 22px 48px rgba(0,0,0,.20),0 0 32px rgba(30,176,255,.06);
}

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

.ad-video-editor-head span:first-child {
    display: block;
    margin-bottom: 5px;
    color: #7fdcff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
}

.ad-video-editor-head h3 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    letter-spacing: .02em;
}

.ad-video-editor-head p {
    max-width: 720px;
    margin: 7px 0 0;
    color: #b9cadd;
    font-size: 12px;
    line-height: 1.5;
}

.ad-editor-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.ad-editor-status-pill,
.ad-editor-small-btn {
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .10em;
}

.ad-editor-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42,225,255,.42);
    background: rgba(8,28,43,.66);
    color: #bff7ff;
}

.ad-editor-small-btn {
    border: 1px solid rgba(154,88,255,.44);
    background: rgba(25,16,44,.76);
    color: #ebddff;
    cursor: pointer;
}

.ad-video-editor-main {
    display: grid;
    grid-template-columns: minmax(0,1.45fr) minmax(280px,.75fr);
    gap: 14px;
    align-items: start;
}

.ad-editor-monitor-panel,
.ad-editor-tools-panel,
.ad-editor-timeline-wrap {
    border: 1px solid rgba(75,109,145,.33);
    border-radius: 13px;
    background: rgba(5,14,27,.70);
}

.ad-editor-monitor-panel {
    padding: 12px;
}

.ad-editor-screen {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    border: 1px solid rgba(45,215,255,.34);
    border-radius: 10px;
    background: radial-gradient(circle at 50% 45%,rgba(33,138,255,.13),transparent 44%),
    linear-gradient(150deg,#02060d,#08111d 55%,#130719);
    box-shadow: inset 0 0 55px rgba(27,183,255,.035),0 0 24px rgba(0,198,255,.06);
}

#adEditorVideo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}

.ad-editor-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 7px;
    padding: 24px;
    text-align: center;
    pointer-events: none;
}

.ad-editor-empty strong {
    color: #e9faff;
    font-size: 15px;
    letter-spacing: .10em;
}

.ad-editor-empty span {
    color: #8ea7bf;
    font-size: 11px;
}

.ad-editor-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: #000;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}

.ad-editor-placeholder.show {
    opacity: 1;
}

.ad-editor-placeholder img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

#adEditorVideo {
    position: relative;
    z-index: 0;
}

.ad-editor-composite-stage {
    z-index: 2;
}

.ad-editor-screen-label {
    z-index: 4;
}

.ad-editor-screen-label {
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid rgba(97,124,154,.27);
    border-radius: 7px;
    background: rgba(0,6,14,.70);
    color: #d9e7f5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    backdrop-filter: blur(8px);
}

.ad-editor-transport {
    display: grid;
    grid-template-columns: auto auto auto minmax(90px,1fr) auto;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.ad-editor-transport button,
.ad-editor-tool-btn,
.ad-editor-url-row button,
.ad-editor-button-grid button {
    min-height: 34px;
    border: 1px solid rgba(91,124,163,.42);
    border-radius: 8px;
    background: rgba(10,24,42,.84);
    color: #e9f3fd;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    cursor: pointer;
}

.ad-editor-transport button:hover,
.ad-editor-tool-btn:hover,
.ad-editor-url-row button:hover,
.ad-editor-button-grid button:hover {
    filter: brightness(1.12);
    border-color: rgba(49,216,255,.60);
}

.ad-editor-transport button.primary,
.ad-editor-tool-btn.cyan {
    border-color: rgba(30,220,255,.70);
    background: linear-gradient(135deg,rgba(17,96,145,.88),rgba(31,58,120,.90));
    box-shadow: 0 0 13px rgba(33,216,255,.12);
}

#adEditorScrubber {
    width: 100%;
    accent-color: #35dbff;
}

.ad-editor-tools-panel {
    display: grid;
    gap: 10px;
    padding: 11px;
}

.ad-editor-tool-group {
    padding: 11px;
    border: 1px solid rgba(76,108,144,.25);
    border-radius: 10px;
    background: rgba(8,18,33,.62);
}

.ad-editor-tool-group h4 {
    margin: 0 0 9px;
    color: #f0f8ff;
    font-size: 11px;
    letter-spacing: .10em;
}

.ad-editor-tool-group p {
    margin: 8px 0 0;
    color: #8ea3b8;
    font-size: 9px;
    line-height: 1.45;
}

.ad-editor-tool-btn {
    width: 100%;
}

.ad-editor-url-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 7px;
    margin-top: 7px;
}

.ad-editor-url-row input,
.ad-editor-inspector input,
.ad-editor-inspector select {
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid rgba(83,111,143,.48);
    border-radius: 8px;
    background: rgba(3,12,23,.78);
    color: #fff;
    font-size: 10px;
}

.ad-editor-button-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
}

.ad-editor-button-grid button.magenta {
    border-color: rgba(239,75,207,.58);
    background: rgba(81,20,70,.62);
}

.ad-editor-button-grid button.danger {
    border-color: rgba(255,94,126,.50);
    background: rgba(68,17,29,.66);
    color: #ffd9e0;
}

.ad-editor-inspector label {
    display: grid;
    gap: 5px;
    color: #aec3d7;
    font-size: 9px;
    font-weight: 800;
}

.ad-editor-two-fields {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    margin-top: 7px;
}

.ad-editor-check {
    display: flex!important;
    grid-template-columns: none!important;
    align-items: center;
    gap: 7px!important;
    margin-top: 8px;
}

.ad-editor-check input {
    width: auto!important;
    min-height: 0!important;
}

.ad-editor-timeline-wrap {
    margin-top: 13px;
    padding: 11px;
}

.ad-editor-timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.ad-editor-timeline-head div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ad-editor-timeline-head span {
    color: #d9f8ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}

.ad-editor-timeline-head strong {
    color: #48e5ff;
    font-size: 11px;
}

.ad-editor-timeline-head small {
    color: #849db4;
    font-size: 9px;
}

.ad-editor-timeline {
    min-height: 112px;
    display: flex;
    align-items: stretch;
    gap: 7px;
    overflow-x: auto;
    padding: 9px;
    border: 1px solid rgba(70,102,138,.30);
    border-radius: 9px;
    background: repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 48px),
    rgba(2,9,18,.78);
}

.ad-editor-timeline-empty {
    width: 100%;
    display: grid;
    place-items: center;
    color: #829ab0;
    font-size: 10px;
    text-align: center;
}

.ad-timeline-clip {
    position: relative;
    flex: 0 0 clamp(145px,var(--clip-width,190px),260px);
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 7px;
    padding: 10px;
    border: 1px solid rgba(78,123,165,.46);
    border-radius: 8px;
    background: linear-gradient(135deg,rgba(12,42,65,.90),rgba(35,18,57,.86));
    color: #fff;
    cursor: pointer;
    user-select: none;
}

.ad-timeline-clip.selected {
    border-color: #42e5ff;
    box-shadow: 0 0 0 1px rgba(66,229,255,.12),0 0 18px rgba(35,213,255,.16);
}

.ad-timeline-clip.dragging {
    opacity: .52;
}

.ad-timeline-clip strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.ad-timeline-clip span {
    color: #a9c4dc;
    font-size: 9px;
}

.ad-timeline-clip .clip-segment-bar {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(3,10,18,.75);
}

.ad-timeline-clip .clip-segment-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#21d9ff,#844dff,#f246bd);
}

.ad-timeline-index {
    position: absolute;
    top: 6px;
    right: 7px;
    color: rgba(232,246,255,.54)!important;
    font-size: 8px!important;
    font-weight: 900;
}

@media (max-width:1180px){
    .ad-video-editor-main {
        grid-template-columns: 1fr;
    }

    .ad-video-editor-shell {
        max-width: none;
    }
}

@media (max-width:700px){
    .ad-video-editor-shell {
        padding: 11px;
        border-radius: 12px;
    }

    .ad-video-editor-head {
        flex-direction: column;
    }

    .ad-editor-head-actions {
        justify-content: flex-start;
    }

    .ad-editor-transport {
        grid-template-columns: repeat(3,auto) minmax(0,1fr);
    }

    #adEditorPlaySequence {
        grid-column: 1/-1;
    }

    .ad-editor-two-fields {
        grid-template-columns: 1fr;
    }

    .ad-editor-timeline-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .ad-editor-screen-label {
        font-size: 8px;
    }
}

/* =========================================================
   DA OUTLET AD STUDIO — v6 TOP WORKSPACE LAYOUT
   Editor left, 3x3 launcher grid right, centered overlays.
   ========================================================= */
.ad-studio-top-workspace {
    display: grid;
    grid-template-columns: minmax(640px,1.12fr) minmax(560px,.88fr);
    gap: 20px;
    align-items: start;
}

.ad-studio-editor-column,
.ad-studio-launcher-column {
    min-width: 0;
}

.ad-studio-launcher-column .ad-studio-launch-grid {
    max-width: none;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
}

.ad-studio-launcher-column .ad-studio-launch-card {
    min-height: 142px;
    padding: 13px 13px 12px;
    border-radius: 12px;
}

.ad-studio-launcher-column .ad-card-icon {
    min-width: 34px;
    height: 34px;
    margin-bottom: 11px;
    padding: 0 7px;
    border-width: 1px;
    border-radius: 7px;
    font-size: 17px;
}

.ad-studio-launcher-column .ad-studio-launch-card strong {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.2;
}

.ad-studio-launcher-column .ad-studio-launch-card small {
    min-height: 31px;
    font-size: 9px;
    line-height: 1.35;
}

.ad-studio-launcher-column .ad-card-open {
    min-height: 26px;
    margin-top: 10px;
    padding: 0 8px;
    font-size: 8px;
}

.ad-studio-editor-column .ad-video-editor-shell {
    max-width: none;
    width: 100%;
    margin-top: 0;
}

.ad-studio-tip {
    max-width: none;
}

/* Center every Ad Studio overlay over the workspace. */
.ad-studio-overlay {
    align-items: center;
    justify-content: center;
    padding: 34px;
}

.ad-overlay-panel {
    width: min(760px,calc(100vw - 68px));
    max-height: calc(100vh - 68px);
}

.asset-overlay-panel,
.projects-overlay-panel {
    width: min(1040px,calc(100vw - 68px));
}

/* Standalone generated-video library under the 3x3 Ad Studio launch cards. */
.ad-generated-videos-panel {
    margin-top: 14px;
    padding: 13px;
    border: 1px solid rgba(62,128,182,.36);
    border-radius: 14px;
    background: linear-gradient(145deg,rgba(5,16,31,.90),rgba(13,9,29,.82));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 16px 34px rgba(0,0,0,.16);
}

.ad-generated-videos-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.ad-generated-videos-head > div:first-child {
    min-width: 0;
}

.ad-generated-videos-head span {
    display: block;
    margin-bottom: 4px;
    color: #61e7ff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .16em;
}

.ad-generated-videos-head h3 {
    margin: 0 0 5px;
    color: #f3fbff;
    font-size: 16px;
    letter-spacing: .05em;
}

.ad-generated-videos-head p {
    margin: 0;
    max-width: 540px;
    color: #9eb3c7;
    font-size: 9px;
    line-height: 1.45;
}

.ad-generated-video-head-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.ad-generated-video-head-meta strong {
    color: #d7c8ff;
    font-size: 8px;
    white-space: nowrap;
    letter-spacing: .09em;
}

#adGeneratedVideoClear {
    min-height: 27px;
    padding: 0 9px;
    border: 1px solid rgba(236,78,170,.38);
    border-radius: 999px;
    background: rgba(47,13,34,.66);
    color: #ffd6ec;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
    cursor: pointer;
}

.ad-generated-video-add-row {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(120px,.75fr) auto;
    gap: 7px;
    margin-bottom: 10px;
}

.ad-generated-video-add-row input {
    min-width: 0;
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid rgba(83,111,143,.48);
    border-radius: 8px;
    background: rgba(3,12,23,.78);
    color: #fff;
    font-size: 9px;
}

#adGeneratedVideoAddUrl {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(40,220,255,.64);
    border-radius: 8px;
    background: linear-gradient(135deg,rgba(15,93,139,.88),rgba(67,31,123,.86));
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .07em;
    cursor: pointer;
}

.ad-generated-video-feed {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
    max-height: 420px;
    overflow: auto;
    padding: 8px;
    border: 1px solid rgba(70,102,138,.30);
    border-radius: 10px;
    background: rgba(2,9,18,.70);
}

.ad-generated-video-empty {
    grid-column: 1/-1;
    min-height: 110px;
    display: grid;
    place-items: center;
    padding: 16px;
    color: #829ab0;
    font-size: 9px;
    line-height: 1.5;
    text-align: center;
}

.ad-generated-video-card {
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(75,122,167,.40);
    border-radius: 10px;
    background: linear-gradient(145deg,rgba(10,27,45,.90),rgba(28,13,45,.84));
    cursor: grab;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.ad-generated-video-card:active {
    cursor: grabbing;
}

.ad-generated-video-card.dragging {
    opacity: .54;
}

.ad-generated-video-preview {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(44,203,255,.26);
    background: #02060d;
}

.ad-generated-video-preview video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #000;
}

.ad-generated-video-preview > span {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    padding: 4px 6px;
    border-radius: 999px;
    background: rgba(1,7,15,.76);
    border: 1px solid rgba(109,102,255,.32);
    color: #dfd6ff;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .07em;
    pointer-events: none;
}

.ad-generated-video-copy {
    display: grid;
    gap: 3px;
    margin-top: 7px;
}

.ad-generated-video-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 10px;
}

.ad-generated-video-copy small {
    color: #8fb1ca;
    font-size: 7px;
    letter-spacing: .05em;
}

.ad-generated-video-actions {
    display: flex;
    gap: 6px;
    margin-top: 7px;
}

.ad-generated-video-actions button {
    flex: 1;
    min-height: 26px;
    padding: 0 7px;
    border: 1px solid rgba(57,177,221,.36);
    border-radius: 7px;
    background: rgba(7,25,43,.74);
    color: #dbf6ff;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .06em;
    cursor: pointer;
}

.ad-generated-video-actions button.danger {
    flex: 0 0 auto;
    border-color: rgba(255,83,133,.34);
    background: rgba(48,13,27,.72);
    color: #ffd8e3;
}

.ad-editor-timeline.drop-ready {
    border-color: rgba(54,225,255,.82);
    box-shadow: inset 0 0 24px rgba(38,198,255,.08),0 0 18px rgba(35,213,255,.10);
}

@media (max-width:1450px){
    .ad-studio-top-workspace {
        grid-template-columns: 1fr;
    }

    .ad-studio-launcher-column {
        order: 2;
    }

    .ad-studio-launcher-column .ad-studio-launch-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .ad-studio-launcher-column .ad-studio-launch-card {
        min-height: 132px;
    }
}

@media (max-width:820px){
    .ad-studio-top-workspace {
        display: block;
    }

    .ad-studio-launcher-column {
        margin-top: 16px;
    }

    .ad-studio-launcher-column .ad-studio-launch-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .ad-studio-launcher-column .ad-studio-launch-card {
        min-height: 128px;
    }

    .ad-studio-overlay {
        align-items: center;
        justify-content: center;
        padding: 18px 10px;
    }

    .ad-generated-videos-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .ad-generated-video-head-meta {
        justify-content: flex-start;
    }

    .ad-generated-video-add-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width:520px){
    .ad-studio-launcher-column .ad-studio-launch-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .ad-generated-video-feed {
        grid-template-columns: 1fr;
    }

    .ad-studio-launcher-column .ad-studio-launch-card {
        min-height: 118px;
        padding: 10px;
    }

    .ad-studio-launcher-column .ad-card-icon {
        margin-bottom: 8px;
    }

    .ad-studio-launcher-column .ad-card-open {
        display: none;
    }
}

/* =========================================================
   DA OUTLET AD STUDIO — v7 MULTITRACK EDITOR OVERRIDES
   ========================================================= */
.ad-editor-small-btn.export {
    border-color: rgba(42,225,255,.55);
    background: linear-gradient(135deg,rgba(11,96,137,.84),rgba(97,29,129,.82));
    color: #fff;
    box-shadow: 0 0 15px rgba(48,214,255,.10);
}

.ad-editor-small-btn:disabled {
    opacity: .55;
    cursor: wait;
}

.ad-editor-screen {
    aspect-ratio: 9/16;
    max-height: 560px;
    margin-inline: auto;
    transition: aspect-ratio .2s ease;
}

.ad-editor-composite-stage,
.ad-editor-composite-layers {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000;
}

.ad-editor-composite-stage[hidden] {
    display: none!important;
}

.ad-composite-video-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
}

.ad-editor-output-readout {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 9px;
    padding: 8px 10px;
    border: 1px solid rgba(71,119,164,.28);
    border-radius: 9px;
    background: rgba(6,16,29,.58);
    color: #a9bfd4;
    font-size: 9px;
    letter-spacing: .08em;
}

.ad-editor-output-readout strong {
    color: #e8f8ff;
    font-size: 10px;
}

.ad-editor-output-readout small {
    margin-left: auto;
    color: #55e5ff;
    font-weight: 900;
}

.ad-editor-source-buttons {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
}

.ad-editor-tool-btn.purple {
    border-color: rgba(183,84,255,.62);
    background: linear-gradient(135deg,rgba(59,28,108,.84),rgba(109,26,91,.80));
    box-shadow: 0 0 13px rgba(183,84,255,.10);
}

.ad-editor-video-blend-fields[hidden] {
    display: none!important;
}

.ad-editor-inspector input[type="range"] {
    padding: 0;
    accent-color: #49e0ff;
}

.ad-editor-timeline-wrap {
    overflow: hidden;
}

.ad-editor-timeline-ruler {
    position: relative;
    height: 24px;
    margin-left: 64px;
    overflow: hidden;
    border-top: 1px solid rgba(69,105,140,.22);
    border-bottom: 1px solid rgba(69,105,140,.22);
    background: repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 62px),rgba(2,9,18,.72);
}

.ad-editor-timeline-ruler span {
    position: absolute;
    top: 4px;
    transform: translateX(-1px);
    color: #7895ad;
    font-size: 8px;
    font-weight: 800;
}

.ad-editor-timeline {
    display: block;
    min-height: 420px;
    overflow: auto;
    padding: 0;
    border-radius: 9px;
    background: #020914;
}

.ad-editor-timeline-empty {
    position: sticky;
    left: 64px;
    z-index: 8;
    height: 36px;
    display: flex;
    align-items: center;
    padding-left: 12px;
    color: #8098ad;
    font-size: 9px;
    pointer-events: none;
}

.ad-track-lane {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(760px,1fr);
    min-height: 48px;
    border-bottom: 1px solid rgba(55,83,112,.28);
}

.ad-track-lane.video {
    background: rgba(4,15,27,.88);
}

.ad-track-lane.audio {
    background: rgba(16,8,27,.80);
}

.ad-track-label {
    position: sticky;
    left: 0;
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-right: 1px solid rgba(75,108,143,.34);
    background: rgba(4,12,23,.96);
    color: #fff;
}

.ad-track-label strong {
    font-size: 11px;
    color: #62e9ff;
}

.ad-track-lane.audio .ad-track-label strong {
    color: #d681ff;
}

.ad-track-label span {
    font-size: 7px;
    color: #7f96aa;
    letter-spacing: .12em;
}

.ad-track-content {
    position: relative;
    min-height: 48px;
    background: repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 62px);
}

.ad-track-content.drop-ready {
    outline: 1px solid rgba(56,223,255,.75);
    box-shadow: inset 0 0 18px rgba(50,217,255,.08);
}

.ad-timeline-clip {
    position: absolute;
    top: 5px;
    min-width: 58px;
    height: 38px;
    min-height: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 5px 8px;
    border-radius: 7px;
    overflow: hidden;
    cursor: grab;
}

.ad-timeline-clip.video {
    border-color: rgba(53,190,239,.55);
    background: linear-gradient(135deg,rgba(14,56,84,.94),rgba(43,25,75,.90));
}

.ad-timeline-clip.audio {
    border-color: rgba(194,94,255,.55);
    background: linear-gradient(135deg,rgba(64,24,96,.92),rgba(106,26,72,.88));
}

.ad-timeline-clip:active {
    cursor: grabbing;
}

.ad-timeline-clip strong {
    font-size: 9px;
    line-height: 1.05;
}

.ad-timeline-clip span {
    font-size: 7px;
    line-height: 1;
}

.ad-timeline-clip .clip-segment-bar {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 3px;
    height: 3px;
}

.ad-timeline-clip .clip-segment-bar i {
    width: 100%;
}

.ad-timeline-index {
    top: 3px;
    right: 5px;
    font-size: 7px!important;
}

@media (max-width:1180px){
    .ad-editor-screen {
        max-height: 480px;
    }
}

@media (max-width:700px){
    .ad-editor-source-buttons {
        grid-template-columns: 1fr;
    }

    .ad-editor-timeline-ruler {
        margin-left: 54px;
    }

    .ad-track-lane {
        grid-template-columns: 54px minmax(720px,1fr);
    }

    .ad-editor-timeline {
        min-height: 390px;
    }
}

/* =========================================================
   DA OUTLET AD STUDIO — v8 monitor/timeline UX upgrades
   ========================================================= */
.ad-card-icon.icon-image {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    min-width: auto;
    height: auto;
}

.ad-card-icon.icon-image img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(68,223,255,.28));
}

.ad-studio-launcher-column .ad-card-icon.icon-image img {
    width: 34px;
    height: 34px;
}

.ad-editor-monitor-panel {
    display: grid;
    gap: 10px;
}

.ad-editor-screen {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    transition: aspect-ratio .18s ease,width .18s ease,max-width .18s ease;
}

.ad-editor-screen[data-preview-frame="fit"] {
    aspect-ratio: 16/9!important;
    width: 100%!important;
    max-width: 100%;
}

.ad-editor-screen[data-preview-frame="output"] {
    width: 100%!important;
    max-width: 100%;
}

.ad-editor-screen[data-preview-frame="landscape"] {
    aspect-ratio: 16/9!important;
    width: 100%!important;
    max-width: 100%;
}

.ad-editor-screen[data-preview-frame="vertical"] {
    aspect-ratio: 9/16!important;
    width: min(100%,360px)!important;
    max-width: 360px;
}

.ad-editor-screen[data-preview-frame="square"] {
    aspect-ratio: 1/1!important;
    width: min(100%,520px)!important;
    max-width: 520px;
}

.ad-editor-view-panel,
.ad-editor-transport-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(71,119,164,.28);
    border-radius: 10px;
    background: rgba(6,16,29,.58);
}

.ad-editor-view-modes {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.ad-editor-view-modes span {
    color: #9ec6de;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    margin-right: 2px;
}

.ad-editor-view-modes button {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(87,120,157,.4);
    border-radius: 999px;
    background: rgba(9,23,40,.76);
    color: #dbe8f3;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    cursor: pointer;
}

.ad-editor-view-modes button.active,
.ad-editor-view-modes button:hover {
    border-color: rgba(45,216,255,.65);
    box-shadow: 0 0 0 1px rgba(45,216,255,.12),0 0 15px rgba(45,216,255,.10);
}

.ad-editor-output-readout {
    margin-top: 0;
    min-width: 172px;
    justify-content: flex-start;
}

.ad-editor-transport-panel {
    padding: 12px;
}

.ad-editor-transport {
    margin-top: 0;
    width: 100%;
}

.ad-editor-range-value,
.ad-range-value {
    display: inline-flex;
    justify-content: flex-end;
    color: #55e5ff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
}

.ad-editor-fade-grid label {
    position: relative;
}

.ad-editor-fade-grid .ad-range-value {
    margin-top: 2px;
}

.ad-editor-timeline-ruler {
    position: relative;
    overflow: auto;
}

.ad-editor-timeline-ruler-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,rgba(45,228,255,.98),rgba(188,92,255,.96));
    box-shadow: 0 0 14px rgba(45,228,255,.35);
    pointer-events: none;
    z-index: 9;
}

.ad-track-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,rgba(45,228,255,.95),rgba(188,92,255,.95));
    box-shadow: 0 0 14px rgba(45,228,255,.25);
    pointer-events: none;
    z-index: 6;
}

.ad-editor-timeline {
    position: relative;
    scroll-behavior: smooth;
}

.ad-track-content {
    overflow: visible;
}

.ad-timeline-clip {
    transition: left .05s linear, top .05s linear, box-shadow .15s ease;
}

.ad-timeline-clip.dragging {
    opacity: .92;
    box-shadow: 0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(52,224,255,.25),0 0 18px rgba(52,224,255,.14);
    z-index: 20;
    transition: none;
}

@media (max-width:900px){
    .ad-editor-view-panel,
    .ad-editor-transport-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .ad-editor-output-readout {
        width: 100%;
    }

    .ad-editor-screen[data-preview-frame="vertical"] {
        max-width: 300px;
    }
}

/* =========================================================
   DA OUTLET AD STUDIO — v9 BLUE + GOLD EDITOR SYSTEM
   ========================================================= */
.ad-studio-view {
    --ad-blue: #26b8ff;
    --ad-blue-bright: #63d8ff;
    --ad-blue-deep: #071a31;
    --ad-gold: #f1c552;
    --ad-gold-bright: #ffe08a;
    --ad-gold-deep: #7c5a13;
    --ad-panel: rgba(5,18,35,.90);
}

.ad-studio-hero h2 em {
    background: linear-gradient(90deg,var(--ad-blue-bright),var(--ad-gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ad-studio-hero .content-sync-badge {
    border-color: rgba(241,197,82,.58)!important;
    color: var(--ad-gold-bright)!important;
    background: rgba(61,42,5,.62)!important;
}

.ad-studio-launch-card {
    border-color: rgba(69,139,196,.42);
    background: linear-gradient(160deg,rgba(6,24,43,.95),rgba(4,13,26,.93));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 16px 34px rgba(0,0,0,.20);
}

.ad-studio-launch-card::after {
    background: radial-gradient(circle,rgba(241,197,82,.10),transparent 68%);
}

.ad-studio-launch-card:hover,
.ad-studio-launch-card:focus-visible,
.ad-studio-launch-card.active-card {
    border-color: rgba(241,197,82,.88);
    box-shadow: 0 0 0 1px rgba(38,184,255,.18),0 0 22px rgba(38,184,255,.12),0 0 28px rgba(241,197,82,.08),inset 0 0 28px rgba(38,184,255,.045);
}

.ad-card-open {
    border-color: rgba(241,197,82,.32);
    background: rgba(5,20,37,.78);
    color: #eaf8ff;
}

.ad-card-open:hover {
    border-color: rgba(241,197,82,.78);
    color: var(--ad-gold-bright);
}

.ad-card-icon.icon-image {
    margin-bottom: 10px!important;
}

.ad-card-icon.icon-image img {
    width: 58px!important;
    height: 58px!important;
    object-fit: contain;
    background: transparent!important;
    border: 0!important;
    border-radius: 0!important;
    filter: drop-shadow(0 0 10px rgba(38,184,255,.24)) drop-shadow(0 0 15px rgba(241,197,82,.10));
}

.ad-studio-launcher-column .ad-card-icon.icon-image img {
    width: 54px!important;
    height: 54px!important;
}

.ad-video-editor-shell,
.ad-editor-monitor-panel,
.ad-editor-tools-panel,
.ad-editor-timeline-wrap,
.ad-editor-edit-selected-panel,
.ad-generated-videos-panel {
    border-color: rgba(58,126,184,.38)!important;
    background: linear-gradient(150deg,rgba(5,21,39,.93),rgba(4,12,25,.91))!important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 18px 42px rgba(0,0,0,.18),0 0 28px rgba(38,184,255,.04)!important;
}

.ad-video-editor-head span:first-child,
.ad-editor-timeline-head strong,
.ad-editor-output-readout small,
.ad-track-label strong,
.ad-editor-slider-field strong,
.ad-range-value {
    color: var(--ad-blue-bright)!important;
}

.ad-track-lane.audio .ad-track-label strong {
    color: var(--ad-gold-bright)!important;
}

.ad-editor-small-btn.export,
.ad-editor-tool-btn.cyan,
.ad-editor-transport button.primary {
    border-color: rgba(38,184,255,.65)!important;
    background: linear-gradient(135deg,rgba(7,101,159,.90),rgba(9,50,95,.92))!important;
    box-shadow: 0 0 15px rgba(38,184,255,.10)!important;
}

.ad-editor-tool-btn.purple,
.ad-editor-transport button:not(.primary),
.ad-editor-button-grid button.magenta {
    border-color: rgba(241,197,82,.55)!important;
    background: linear-gradient(135deg,rgba(91,65,10,.78),rgba(44,34,13,.84))!important;
    color: #fff8de!important;
}

.ad-editor-button-grid button.danger {
    border-color: rgba(255,103,120,.52)!important;
    background: rgba(67,16,28,.70)!important;
}

.ad-overlay-panel {
    border-color: rgba(38,184,255,.72)!important;
    background: radial-gradient(circle at 100% 0,rgba(241,197,82,.09),transparent 32%),linear-gradient(145deg,rgba(5,22,41,.97),rgba(6,14,27,.96))!important;
    box-shadow: 0 0 0 1px rgba(241,197,82,.18),0 0 28px rgba(38,184,255,.14),0 0 36px rgba(241,197,82,.08),0 28px 70px rgba(0,0,0,.48)!important;
}

/* Timeline-only transport */
.ad-editor-transport.timeline-only {
    display: grid;
    grid-template-columns: auto auto minmax(150px,1fr) auto auto;
    gap: 9px;
    align-items: center;
    width: 100%;
}

.ad-editor-transport.timeline-only button {
    min-width: 78px;
    padding-inline: 12px;
}

.ad-editor-transport.timeline-only button.active {
    border-color: rgba(241,197,82,.78)!important;
    box-shadow: 0 0 0 1px rgba(241,197,82,.10),0 0 14px rgba(241,197,82,.10)!important;
}

.ad-editor-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(85,125,160,.36);
    border-radius: 999px;
    background: rgba(5,19,34,.76);
    color: #c9d9e7;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    cursor: pointer;
    user-select: none;
}

.ad-editor-toggle input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--ad-gold);
}

.ad-editor-toggle:has(input:checked) {
    border-color: rgba(241,197,82,.62);
    color: var(--ad-gold-bright);
    box-shadow: 0 0 12px rgba(241,197,82,.08);
}

.ad-editor-shortcut-hint {
    display: block;
    margin-top: 7px;
    color: #7897af;
    font-size: 8px;
    letter-spacing: .08em;
    text-align: right;
}

/* Edit Selected Media now lives directly above the timeline. */
.ad-editor-edit-selected-panel {
    margin-top: 13px;
    padding: 12px;
    border: 1px solid rgba(58,126,184,.38);
    border-radius: 12px;
}

.ad-editor-edit-selected-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.ad-editor-edit-selected-head span {
    display: block;
    margin-bottom: 3px;
    color: var(--ad-gold);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .14em;
}

.ad-editor-edit-selected-head h4 {
    margin: 0;
    color: #fff;
    font-size: 12px;
    letter-spacing: .07em;
}

.ad-editor-edit-selected-head small {
    color: #829bb0;
    font-size: 8px;
}

.ad-editor-button-grid.horizontal {
    grid-template-columns: repeat(8,minmax(76px,1fr));
    gap: 7px;
}

/* Slider-first Clip Inspector */
.ad-editor-slider-field {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}

.ad-editor-slider-field.compact {
    margin-top: 0;
    align-content: end;
}

.ad-editor-slider-field > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ad-editor-slider-field span {
    color: #aec3d7;
    font-size: 9px;
    font-weight: 800;
}

.ad-editor-slider-field strong {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .04em;
}

.ad-editor-slider-field input[type="range"],
.ad-editor-inspector input[type="range"] {
    width: 100%;
    min-height: 18px!important;
    padding: 0!important;
    accent-color: var(--ad-gold)!important;
    cursor: pointer;
}

#adEditorInTime,
#adEditorOutTime {
    accent-color: var(--ad-blue)!important;
}

#adEditorVolume,
#adEditorOpacity {
    accent-color: var(--ad-gold)!important;
}

/* Blue/gold multitrack language */
.ad-track-lane.video {
    background: rgba(4,19,35,.90)!important;
}

.ad-track-lane.audio {
    background: rgba(29,22,7,.48)!important;
}

.ad-timeline-clip.video {
    border-color: rgba(38,184,255,.62)!important;
    background: linear-gradient(135deg,rgba(9,71,112,.96),rgba(8,34,65,.94))!important;
}

.ad-timeline-clip.audio {
    border-color: rgba(241,197,82,.62)!important;
    background: linear-gradient(135deg,rgba(99,71,13,.94),rgba(48,38,13,.92))!important;
}

.ad-timeline-clip.selected {
    border-color: var(--ad-gold)!important;
    box-shadow: 0 0 0 1px rgba(38,184,255,.18),0 0 18px rgba(241,197,82,.14)!important;
}

.ad-timeline-clip .clip-segment-bar i {
    background: linear-gradient(90deg,var(--ad-blue),#82dfff,var(--ad-gold))!important;
}

.ad-editor-timeline-ruler-playhead,
.ad-track-playhead {
    background: linear-gradient(180deg,var(--ad-gold-bright),var(--ad-blue))!important;
    box-shadow: 0 0 14px rgba(241,197,82,.30)!important;
}

.ad-editor-view-modes button.active,
.ad-editor-view-modes button:hover {
    border-color: rgba(241,197,82,.68)!important;
    color: var(--ad-gold-bright)!important;
    box-shadow: 0 0 0 1px rgba(38,184,255,.12),0 0 15px rgba(241,197,82,.08)!important;
}

@media (max-width:1280px){
    .ad-editor-button-grid.horizontal {
        grid-template-columns: repeat(4,minmax(90px,1fr));
    }
}

@media (max-width:900px){
    .ad-editor-transport.timeline-only {
        grid-template-columns: 1fr 1fr;
    }

    .ad-editor-transport.timeline-only #adEditorScrubber {
        grid-column: 1/-1;
        grid-row: 1;
    }

    .ad-editor-transport.timeline-only .ad-editor-toggle {
        justify-content: center;
    }

    .ad-editor-button-grid.horizontal {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .ad-editor-edit-selected-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .ad-editor-shortcut-hint {
        text-align: left;
    }
}

/* =========================================================
   DA OUTLET v10 — Crew manager + slider inspector refinements
   ========================================================= */
.crew-card {
    border-color: rgba(213,168,72,.58);
    background: linear-gradient(145deg,rgba(5,30,59,.94),rgba(6,18,38,.94));
    box-shadow: 0 0 24px rgba(21,111,198,.16),inset 0 1px 0 rgba(255,214,117,.05);
}

.crew-card strong {
    color: #f1c765;
    text-shadow: -2px 2px #1ca8ff;
}

.crew-card p {
    margin-bottom: 12px;
    color: #b9c9dc;
}

.crew-photo-manager {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 7px;
    align-items: center;
    margin: 0 0 7px;
}

.crew-photo-slot,
.crew-photo-add {
    position: relative;
    aspect-ratio: 1/1;
    width: 100%;
    min-width: 0;
    border-radius: 50%;
    border: 1px solid rgba(230,188,88,.64);
    background: linear-gradient(145deg,rgba(8,30,56,.96),rgba(3,16,33,.96));
    overflow: hidden;
    cursor: pointer;
    box-shadow: inset 0 0 14px rgba(32,145,255,.09),0 0 11px rgba(220,174,69,.07);
}

.crew-photo-slot:hover,
.crew-photo-add:hover {
    border-color: #f0c966;
    box-shadow: 0 0 12px rgba(240,201,102,.15),inset 0 0 14px rgba(32,145,255,.11);
}

.crew-photo-slot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crew-silhouette {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 25px;
    transform: translate(-50%,-44%);
}

.crew-silhouette::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #657991;
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(28,157,255,.13);
}

.crew-silhouette::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 22px;
    height: 13px;
    border-radius: 13px 13px 7px 7px;
    background: #657991;
    transform: translateX(-50%);
}

.crew-photo-add {
    display: grid;
    place-items: center;
    color: #f0c966;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
}

.crew-remove {
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 3;
    display: none;
    width: 17px;
    height: 17px;
    place-items: center;
    border-radius: 50%;
    background: rgba(2,10,20,.90);
    border: 1px solid rgba(255,199,86,.68);
    color: #ffd87c;
    font-size: 11px;
    font-style: normal;
    line-height: 1;
}

.crew-photo-slot.has-photo .crew-remove {
    display: grid;
}

.crew-photo-help {
    display: block;
    margin: 0 0 12px;
    color: #d3b45e;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.crew-card a {
    border-color: rgba(222,178,71,.70);
    color: #fff6d3;
    background: linear-gradient(90deg,rgba(9,71,131,.34),rgba(86,61,14,.22));
}

.ad-editor-slider-field + .ad-editor-slider-field {
    margin-top: 8px;
}

.ad-editor-inspector #adEditorBlendField[hidden] {
    display: none!important;
}

.ad-editor-inspector input[type="range"] {
    cursor: pointer;
}

.ad-editor-inspector #adEditorStartTime,
.ad-editor-inspector #adEditorSpeed {
    accent-color: #e6bd5c;
}

.crew-card .crew-silhouette {
    display: block;
    margin: 0;
    color: inherit;
    font-size: 0;
}

.crew-card .crew-silhouette[hidden] {
    display: none!important;
}

.crew-card .crew-remove {
    margin: 0;
    color: #ffd87c;
    font-size: 11px;
}

/* =========================================================
   DA OUTLET AD STUDIO — v11 clip zoom, undo & fade preview
   ========================================================= */
#adEditorUndo.undo {
    border-color: rgba(221,179,73,.68);
    background: linear-gradient(135deg,rgba(77,55,13,.82),rgba(23,45,77,.90));
    color: #ffe9a8;
}

#adEditorUndo:disabled {
    opacity: .42;
    cursor: not-allowed;
    filter: none;
}

.ad-editor-video-blend-fields {
    display: grid;
    gap: 9px;
}

.ad-timeline-clip {
    isolation: isolate;
}

.ad-timeline-clip .ad-clip-fade-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(90deg,rgba(1,7,16,.88) 0%,rgba(1,7,16,0) var(--fade-in-pct,0%),rgba(1,7,16,0) calc(100% - var(--fade-out-pct,0%)),rgba(1,7,16,.88) 100%);
}

.ad-timeline-clip.selected .ad-clip-fade-visual {
    box-shadow: inset 0 0 0 1px rgba(224,181,71,.16);
}

.ad-timeline-clip > *:not(.ad-clip-fade-visual) {
    position: relative;
    z-index: 1;
}

.ad-timeline-clip .ad-clip-fade-mark {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(244,199,78,.72);
    box-shadow: 0 0 7px rgba(244,199,78,.25);
    z-index: 2;
    pointer-events: none;
}

.ad-timeline-clip .ad-clip-fade-mark.in {
    left: var(--fade-in-pct,0%);
    display: var(--show-fade-in,none);
}

.ad-timeline-clip .ad-clip-fade-mark.out {
    right: var(--fade-out-pct,0%);
    display: var(--show-fade-out,none);
}

.ad-composite-video-layer {
    transform-origin: center center;
    will-change: transform,opacity;
}

/* =========================================================
   DA OUTLET v12 — storefront-matched dashboard palette
   + blue sliders, directional video pan and scroll scrub UI
   ========================================================= */
:root {
    --bg: #020712;
    --panel: #0b1726;
    --panel2: #101d2d;
    --line: rgba(56,138,220,.62);
    --cyan: #2df3ff;
    --blue: #2df3ff;
    --purple: #a657ff;
    --magenta: #ed4dff;
    --orange: #ff8b11;
    --text: #f7fbff;
    --muted: #a8b5c7;
}

.dashboard-page {
    --store-cyan: #2df3ff;
    --store-purple: #a657ff;
    --store-pink: #ed4dff;
    --store-orange: #ff8b11;
    --store-line: rgba(56,138,220,.72);
    --store-text: #f7fbff;
    --store-muted: #a8b5c7;
}

.dashboard-page::before {
    background: radial-gradient(circle at 15% 12%,rgba(45,243,255,.10),transparent 25%),
    radial-gradient(circle at 82% 12%,rgba(166,87,255,.10),transparent 26%),
    radial-gradient(circle at 72% 78%,rgba(237,77,255,.08),transparent 28%),
    radial-gradient(circle at 30% 84%,rgba(255,139,17,.07),transparent 25%),
    linear-gradient(180deg,rgba(2,7,18,.16),rgba(2,7,18,.34))!important;
}

.dashboard-page .admin-sidebar,
.dashboard-page .admin-topbar {
    border-color: rgba(56,138,220,.34)!important;
    background: linear-gradient(155deg,rgba(7,18,34,.94),rgba(13,13,28,.91))!important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025),0 16px 44px rgba(0,0,0,.18)!important;
}

.dashboard-page .side-brand strong,
.dashboard-page .admin-title-wrap h1,
.dashboard-page .ad-studio-hero h2 em {
    background: linear-gradient(90deg,var(--store-cyan),#f7fbff 48%,var(--store-purple) 72%,var(--store-pink))!important;
    -webkit-background-clip: text!important;
    background-clip: text!important;
    color: transparent!important;
}

.dashboard-page .side-brand span,
.dashboard-page .order-id,
.dashboard-page .text-action,
.dashboard-page .outline-action,
.dashboard-page .ad-studio-eyebrow {
    color: var(--store-cyan)!important;
}

.dashboard-page .data-badge,
.dashboard-page .content-sync-badge,
.dashboard-page .tag.orange {
    border-color: rgba(255,139,17,.50)!important;
    background: rgba(255,139,17,.10)!important;
    color: #ffb55f!important;
}

.dashboard-page .admin-nav-btn.active {
    border-color: rgba(45,243,255,.76)!important;
    background: linear-gradient(90deg,rgba(45,243,255,.13),rgba(166,87,255,.13),rgba(237,77,255,.08))!important;
    box-shadow: 0 0 18px rgba(45,243,255,.11),inset 0 0 20px rgba(166,87,255,.05)!important;
}

.dashboard-page .admin-nav-btn>span {
    color: #9b8aff!important;
}

.dashboard-page .admin-nav-btn>b,
.dashboard-page .bell b {
    background: rgba(166,87,255,.30)!important;
    border-color: rgba(237,77,255,.72)!important;
    color: #fff!important;
}

.dashboard-page .dash-panel,
.dashboard-page .metric-card,
.dashboard-page .kanban-column,
.dashboard-page .design-admin-card,
.dashboard-page .inventory-card,
.dashboard-page .ad-video-editor-shell,
.dashboard-page .ad-editor-monitor-panel,
.dashboard-page .ad-editor-tools-panel,
.dashboard-page .ad-editor-timeline-wrap,
.dashboard-page .ad-editor-edit-selected-panel,
.dashboard-page .ad-generated-videos-panel {
    border-color: rgba(56,138,220,.46)!important;
    background: linear-gradient(145deg,rgba(16,30,45,.76),rgba(8,17,29,.62));
    box-shadow: 0 18px 48px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 40px rgba(45,243,255,.018)!important;
}

.dashboard-page .panel-head,
.dashboard-page .detail-cell,
.dashboard-page .orders-table th,
.dashboard-page .orders-table td {
    border-color: rgba(56,138,220,.24)!important;
}

.dashboard-page input:not([type="range"]),
.dashboard-page select,
.dashboard-page textarea,
.dashboard-page .admin-search,
.dashboard-page .mini-tabs button,
.dashboard-page .outline-action,
.dashboard-page .pagination button {
    border-color: rgba(56,138,220,.42)!important;
    background: rgba(6,18,31,.78)!important;
    color: var(--store-text)!important;
}

.dashboard-page input:focus,
.dashboard-page select:focus,
.dashboard-page textarea:focus {
    outline: 1px solid rgba(45,243,255,.62)!important;
    box-shadow: 0 0 0 3px rgba(45,243,255,.07)!important;
}

.dashboard-page .mini-tabs button.active,
.dashboard-page .pagination button.active {
    border-color: var(--store-cyan)!important;
    color: #fff!important;
    background: rgba(45,243,255,.12)!important;
}

.dashboard-page .metric-card.cyan {
    border-color: rgba(45,243,255,.54)!important;
}

.dashboard-page .metric-card.blue {
    border-color: rgba(56,138,220,.62)!important;
}

.dashboard-page .metric-card.purple {
    border-color: rgba(166,87,255,.58)!important;
}

.dashboard-page .metric-card.teal {
    border-color: rgba(45,243,255,.42)!important;
}

.dashboard-page .metric-card.magenta {
    border-color: rgba(237,77,255,.56)!important;
}

.dashboard-page .tag.blue,
.dashboard-page .tag.cyan {
    color: var(--store-cyan)!important;
}

.dashboard-page .tag.purple {
    color: var(--store-purple)!important;
}

.dashboard-page .tag.green {
    color: #70f4c8!important;
}

.dashboard-page .method-cell {
    border-color: rgba(166,87,255,.58)!important;
    box-shadow: inset 0 0 24px rgba(166,87,255,.07)!important;
}

.dashboard-page .method-cell strong {
    color: var(--store-pink)!important;
}

.dashboard-page .crew-card {
    border-color: rgba(166,87,255,.52)!important;
    background: linear-gradient(145deg,rgba(10,32,49,.86),rgba(24,13,38,.78))!important;
    box-shadow: 0 0 24px rgba(45,243,255,.08),inset 0 0 24px rgba(166,87,255,.035)!important;
}

.dashboard-page .crew-card strong {
    color: var(--store-pink)!important;
    text-shadow: -2px 2px var(--store-cyan)!important;
}

.dashboard-page .crew-photo-slot,
.dashboard-page .crew-photo-add {
    border-color: rgba(166,87,255,.60)!important;
    background: rgba(6,18,31,.86)!important;
}

.dashboard-page .crew-photo-add,
.dashboard-page .crew-photo-help {
    color: var(--store-cyan)!important;
}

.dashboard-page .crew-card a {
    border-color: rgba(45,243,255,.65)!important;
    color: #fff!important;
    background: linear-gradient(90deg,rgba(45,243,255,.08),rgba(166,87,255,.10))!important;
}

/* Ad Studio now inherits the storefront cyan / purple / pink / orange language. */
.ad-studio-view {
    --ad-blue: var(--store-cyan);
    --ad-blue-bright: #78f8ff;
    --ad-blue-deep: #071a31;
    --ad-gold: var(--store-orange);
    --ad-gold-bright: #ffb75e;
    --ad-gold-deep: #6f3700;
}

.ad-studio-view .ad-studio-hero h2 {
    background: linear-gradient(90deg,var(--store-cyan),var(--store-purple),var(--store-pink))!important;
    -webkit-background-clip: text!important;
    background-clip: text!important;
    color: transparent!important;
}

.ad-studio-view .ad-studio-launch-card:hover,
.ad-studio-view .ad-studio-launch-card:focus-visible,
.ad-studio-view .ad-studio-launch-card.active-card {
    border-color: rgba(45,243,255,.76)!important;
    box-shadow: 0 0 0 1px rgba(166,87,255,.12),0 0 22px rgba(45,243,255,.10),0 0 26px rgba(237,77,255,.05)!important;
}

.ad-studio-view .ad-card-open {
    border-color: rgba(166,87,255,.40)!important;
    color: #f7fbff!important;
}

.ad-studio-view .ad-card-open:hover {
    border-color: rgba(237,77,255,.72)!important;
    color: #fff!important;
}

.ad-studio-view .ad-overlay-panel {
    border-color: rgba(45,243,255,.62)!important;
    background: radial-gradient(circle at 100% 0,rgba(237,77,255,.08),transparent 32%),linear-gradient(145deg,rgba(8,21,35,.97),rgba(15,10,28,.96))!important;
    box-shadow: 0 0 0 1px rgba(166,87,255,.14),0 0 28px rgba(45,243,255,.10),0 0 36px rgba(237,77,255,.06),0 28px 70px rgba(0,0,0,.46)!important;
}

.ad-studio-view .ad-editor-tool-btn.purple,
.ad-studio-view .ad-editor-transport button:not(.primary),
.ad-studio-view .ad-editor-button-grid button.magenta {
    border-color: rgba(166,87,255,.55)!important;
    background: linear-gradient(135deg,rgba(80,34,128,.46),rgba(95,27,91,.38))!important;
    color: #f9efff!important;
}

.ad-studio-view .ad-editor-button-grid button.undo {
    border-color: rgba(45,243,255,.52)!important;
    background: linear-gradient(135deg,rgba(10,69,93,.72),rgba(53,30,90,.62))!important;
    color: #e9fdff!important;
}

.ad-studio-view .ad-track-lane.audio {
    background: rgba(30,10,39,.52)!important;
}

.ad-studio-view .ad-timeline-clip.audio {
    border-color: rgba(166,87,255,.62)!important;
    background: linear-gradient(135deg,rgba(62,25,104,.90),rgba(87,23,79,.84))!important;
}

.ad-studio-view .ad-timeline-clip.selected {
    border-color: var(--store-cyan)!important;
    box-shadow: 0 0 0 1px rgba(166,87,255,.15),0 0 18px rgba(45,243,255,.13)!important;
}

.ad-studio-view .ad-timeline-clip .clip-segment-bar i {
    background: linear-gradient(90deg,var(--store-cyan),var(--store-purple),var(--store-pink),var(--store-orange))!important;
}

.ad-studio-view .ad-editor-timeline-ruler-playhead,
.ad-studio-view .ad-track-playhead {
    background: linear-gradient(180deg,var(--store-cyan),var(--store-purple))!important;
    box-shadow: 0 0 14px rgba(45,243,255,.28)!important;
}

.ad-studio-view .ad-clip-fade-mark {
    background: rgba(45,243,255,.78)!important;
    box-shadow: 0 0 7px rgba(45,243,255,.25)!important;
}

/* Every range control in the dashboard is blue, including all Clip Inspector sliders. */
.dashboard-page input[type="range"] {
    accent-color: #2df3ff!important;
    cursor: pointer;
}

.dashboard-page input[type="range"]::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg,rgba(45,243,255,.82),rgba(56,138,220,.42))!important;
}

.dashboard-page input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    margin-top: -5px;
    border: 2px solid #dffcff;
    border-radius: 50%;
    background: #2df3ff!important;
    box-shadow: 0 0 10px rgba(45,243,255,.34);
}

.dashboard-page input[type="range"]::-moz-range-track {
    height: 5px;
    border-radius: 999px;
    background: rgba(56,138,220,.42)!important;
}

.dashboard-page input[type="range"]::-moz-range-progress {
    height: 5px;
    border-radius: 999px;
    background: #2df3ff!important;
}

.dashboard-page input[type="range"]::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 2px solid #dffcff;
    border-radius: 50%;
    background: #2df3ff!important;
    box-shadow: 0 0 10px rgba(45,243,255,.34);
}

.ad-editor-pan-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px 10px;
    margin-top: 4px;
}

.ad-editor-pan-grid .ad-editor-slider-field {
    margin-top: 0;
}

.ad-editor-scroll-scrub {
    display: grid;
    grid-template-columns: auto minmax(78px,130px) auto;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(56,138,220,.38);
    border-radius: 999px;
    background: rgba(5,19,34,.76);
    color: #c9d9e7;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .07em;
    white-space: nowrap;
}

.ad-editor-scroll-scrub input {
    width: 100%;
    min-width: 72px;
}

.ad-editor-scroll-scrub strong {
    color: #78f8ff;
    font-size: 8px;
    min-width: 34px;
    text-align: right;
}

.ad-editor-transport.timeline-only {
    grid-template-columns: auto auto minmax(150px,1fr) auto minmax(185px,auto) auto;
}

@media (max-width:1100px){
    .ad-editor-transport.timeline-only {
        grid-template-columns: repeat(2,auto) minmax(130px,1fr);
    }

    .ad-editor-transport.timeline-only #adEditorScrubber {
        grid-column: 1/-1;
        grid-row: 1;
    }

    .ad-editor-scroll-scrub {
        grid-column: 1/-1;
    }

    .ad-editor-pan-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-page .dashboard-particles span {
    background: rgba(45,243,255,.78)!important;
    box-shadow: 0 0 8px rgba(45,243,255,.36),0 0 18px rgba(166,87,255,.15)!important;
}

.dashboard-page .dashboard-particles span:nth-child(3n) {
    background: rgba(237,77,255,.68)!important;
}

.dashboard-page .dashboard-particles span:nth-child(4n) {
    background: rgba(255,139,17,.66)!important;
}

.dashboard-page .panel-head h2,
.dashboard-page .ad-video-editor-head h3,
.dashboard-page .ad-editor-edit-selected-head h4,
.dashboard-page .ad-generated-videos-head h3 {
    color: var(--store-text)!important;
}

.dashboard-page .panel-head select:hover,
.dashboard-page .outline-action:hover,
.dashboard-page .mini-tabs button:hover {
    border-color: rgba(45,243,255,.62)!important;
}

/* =========================================================
   DA OUTLET v12 — proportion + overlay correction pass
   ========================================================= */
/* Restore balanced editor proportions after the dashboard-wide theme pass. */
.ad-studio-view .ad-video-editor-main {
    grid-template-columns: minmax(0,2fr) minmax(300px,.9fr)!important;
    gap: 14px!important;
    align-items: start!important;
}

.ad-studio-view .ad-editor-monitor-panel {
    min-width: 0!important;
    width: 100%!important;
}

.ad-studio-view .ad-editor-tools-panel {
    width: 100%!important;
    max-width: 390px!important;
    justify-self: end!important;
    min-width: 0!important;
}

.ad-studio-view .ad-editor-screen[data-preview-frame="fit"],
.ad-studio-view .ad-editor-screen[data-preview-frame="landscape"] {
    width: 100%!important;
    max-width: none!important;
    aspect-ratio: 16/9!important;
}

.ad-studio-view .ad-editor-view-panel {
    flex-wrap: wrap!important;
}

.ad-studio-view .ad-editor-transport.timeline-only {
    grid-template-columns: auto auto minmax(180px,1fr) auto auto!important;
    gap: 9px!important;
}

.ad-studio-view .ad-editor-shortcut-hint {
    text-align: right!important;
}

/* The Ad Studio overlay must be above the sticky command bar, sidebar,
   command-center header, editor playhead, and all dashboard chrome. */
.dashboard-page .admin-main,
.dashboard-page .admin-view {
    z-index: auto!important;
}

.dashboard-page .ad-studio-overlay {
    position: fixed!important;
    inset: 0!important;
    z-index: 2147483000!important;
    isolation: isolate!important;
    align-items: center!important;
    justify-content: center!important;
}

.dashboard-page .ad-studio-overlay-scrim {
    z-index: 0!important;
    background: rgba(0,5,14,.72)!important;
    backdrop-filter: blur(10px) saturate(1.05)!important;
    -webkit-backdrop-filter: blur(10px) saturate(1.05)!important;
}

.dashboard-page .ad-overlay-panel {
    z-index: 2!important;
    position: relative!important;
    max-height: calc(100vh - 56px)!important;
}

/* Scroll Scrub was intentionally removed in revised v12. */
.ad-editor-scroll-scrub {
    display: none!important;
}

@media (max-width:1180px){
    .ad-studio-view .ad-video-editor-main {
        grid-template-columns: 1fr!important;
    }

    .ad-studio-view .ad-editor-tools-panel {
        max-width: none!important;
        justify-self: stretch!important;
    }

    .ad-studio-view .ad-editor-transport.timeline-only {
        grid-template-columns: auto auto minmax(140px,1fr) auto auto!important;
    }
}

@media (max-width:760px){
    .ad-studio-view .ad-editor-transport.timeline-only {
        grid-template-columns: 1fr 1fr!important;
    }

    .ad-studio-view .ad-editor-transport.timeline-only #adEditorScrubber {
        grid-column: 1/-1!important;
        grid-row: 1!important;
    }

    .ad-studio-view .ad-editor-transport.timeline-only .ad-editor-toggle {
        justify-content: center!important;
    }

    .ad-studio-view .ad-editor-shortcut-hint {
        text-align: left!important;
    }
}

/* =========================================================
   DA OUTLET AD STUDIO — v13 movable/resizable panel workspace
   ========================================================= */
.ad-studio-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.ad-layout-toolbar-btn {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(30,213,255,.48);
    border-radius: 999px;
    background: linear-gradient(135deg,rgba(7,91,145,.86),rgba(8,37,76,.90));
    color: #effbff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(36,214,255,.08);
}

.ad-layout-toolbar-btn.secondary {
    border-color: rgba(172,78,255,.44);
    background: linear-gradient(135deg,rgba(48,25,86,.82),rgba(25,17,52,.88));
}

.ad-layout-toolbar-btn.active {
    border-color: #43e5ff;
    box-shadow: 0 0 0 1px rgba(67,229,255,.15),0 0 18px rgba(67,229,255,.18);
}

[data-ad-layout-panel] {
    position: relative;
    transform-origin: top left;
    will-change: transform,width,height;
}

[data-ad-layout-panel].ad-layout-custom-sized {
    max-width: none!important;
    max-height: none!important;
}

.ad-layout-panel-handle,
.ad-layout-resize-grip {
    display: none;
    position: absolute;
    z-index: 80;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(71,229,255,.55);
    background: rgba(4,22,40,.94);
    color: #c9f7ff;
    box-shadow: 0 0 16px rgba(54,221,255,.11);
    user-select: none;
    touch-action: none;
}

.ad-layout-panel-handle {
    top: 8px;
    left: 50%;
    min-height: 27px;
    padding: 0 11px;
    border-radius: 999px;
    transform: translateX(-50%);
    gap: 7px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    cursor: grab;
}

.ad-layout-panel-handle::before {
    content: "✥";
    color: #4be8ff;
    font-size: 12px;
}

.ad-layout-panel-handle:active {
    cursor: grabbing;
}

.ad-layout-resize-grip {
    right: 6px;
    bottom: 6px;
    width: 30px;
    height: 30px;
    border-radius: 8px 2px 8px 2px;
    cursor: nwse-resize;
}

.ad-layout-resize-grip::before {
    content: "";
    width: 13px;
    height: 13px;
    background: repeating-linear-gradient(135deg,transparent 0 3px,#55e8ff 3px 5px);
    opacity: .9;
}

.ad-studio-view.layout-edit-mode [data-ad-layout-panel] {
    outline: 1px dashed rgba(70,225,255,.55);
    outline-offset: 4px;
    box-shadow: 0 0 0 2px rgba(70,225,255,.04),0 0 28px rgba(70,225,255,.05)!important;
}

.ad-studio-view.layout-edit-mode .ad-layout-panel-handle,
.ad-studio-view.layout-edit-mode .ad-layout-resize-grip {
    display: flex;
}

.ad-studio-view.layout-edit-mode [data-ad-layout-panel].ad-layout-active {
    z-index: 70!important;
    outline-color: rgba(255,191,68,.92);
    box-shadow: 0 0 0 2px rgba(255,191,68,.08),0 0 30px rgba(255,191,68,.10)!important;
}

.ad-studio-launch-grid[data-ad-layout-panel] {
    padding-top: 0;
}

.ad-studio-view.layout-edit-mode .ad-studio-launch-grid[data-ad-layout-panel] {
    padding-top: 38px;
    padding-bottom: 10px;
    padding-inline: 8px;
    border-radius: 14px;
    background: rgba(4,17,31,.38);
}

.ad-studio-view.layout-edit-mode #adVideoEditor {
    padding-top: 54px;
}

.ad-studio-view.layout-edit-mode #adGeneratedVideosPanel {
    padding-top: 46px;
}

.ad-studio-top-workspace {
    transition: min-height .15s ease;
}

@media (max-width:1180px){
    .ad-studio-view.layout-edit-mode [data-ad-layout-panel],
    [data-ad-layout-panel].ad-layout-custom-sized {
        transform: none!important;
        width: auto!important;
        height: auto!important;
    }

    .ad-layout-panel-handle,
    .ad-layout-resize-grip {
        display: none!important;
    }

    .ad-layout-toolbar-btn#editLayoutToggle {
        display: none;
    }
}

/* =========================================================
   DA OUTLET AD STUDIO — v15 FINAL GRID REBUILD
   One authoritative default layout. No freeform transforms are
   involved until the user deliberately creates a custom layout.
   ========================================================= */
.dashboard-page .ad-studio-view {
    container-type: normal!important;
    width: 100%!important;
    max-width: none!important;
    overflow: visible!important;
}

.dashboard-page .ad-studio-view .ad-studio-top-workspace {
    display: grid!important;
    width: 100%!important;
    max-width: none!important;
    min-width: 0!important;
    grid-template-columns: minmax(0,24fr) minmax(0,51fr) minmax(0,25fr)!important;
    grid-template-areas: "inspector monitor tools"
    "inspector monitor generated"
    "timeline timeline timeline"!important;
    gap: 10px!important;
    align-items: start!important;
    overflow: visible!important;
}

.dashboard-page .ad-studio-view .ad-studio-editor-column,
.dashboard-page .ad-studio-view .ad-studio-launcher-column,
.dashboard-page .ad-studio-view .ad-editor-functional-root {
    display: contents!important;
}

.dashboard-page .ad-studio-view #adEditorInspectorPanel {
    grid-area: inspector!important;
    grid-column: auto!important;
    grid-row: auto!important;
    align-self: stretch!important;
    width: auto!important;
    min-width: 0!important;
    max-width: none!important;
    margin: 0!important;
}

.dashboard-page .ad-studio-view #adEditorMonitorPanel {
    grid-area: monitor!important;
    grid-column: auto!important;
    grid-row: auto!important;
    align-self: start!important;
    width: auto!important;
    min-width: 0!important;
    max-width: none!important;
    margin: 0!important;
}

.dashboard-page .ad-studio-view #adStudioToolsPanel {
    grid-area: tools!important;
    grid-column: auto!important;
    grid-row: auto!important;
    align-self: start!important;
    width: auto!important;
    min-width: 0!important;
    max-width: none!important;
    margin: 0!important;
    display: grid!important;
    grid-template-columns: repeat(3,minmax(0,1fr))!important;
    gap: 7px!important;
}

.dashboard-page .ad-studio-view #adGeneratedVideosPanel {
    grid-area: generated!important;
    grid-column: auto!important;
    grid-row: auto!important;
    align-self: stretch!important;
    width: auto!important;
    min-width: 0!important;
    max-width: none!important;
    margin: 0!important;
}

.dashboard-page .ad-studio-view #adEditorTimelinePanel {
    grid-area: timeline!important;
    grid-column: auto!important;
    grid-row: auto!important;
    width: auto!important;
    min-width: 0!important;
    max-width: none!important;
    margin: 0!important;
    min-height: 350px!important;
}

/* Keep the upper row visually level. */
.dashboard-page .ad-studio-view #adEditorInspectorPanel,
.dashboard-page .ad-studio-view #adEditorMonitorPanel,
.dashboard-page .ad-studio-view #adStudioToolsPanel {
    margin-top: 0!important;
}

/* Player stays dominant but cannot force the grid wider. */
.dashboard-page .ad-studio-view #adEditorMonitorPanel .ad-editor-screen {
    width: 100%!important;
    max-width: none!important;
    min-width: 0!important;
}

.dashboard-page .ad-studio-view #adEditorMonitorPanel .ad-editor-view-panel,
.dashboard-page .ad-studio-view #adEditorMonitorPanel .ad-editor-transport-panel {
    width: 100%!important;
    max-width: none!important;
}

/* Compact, balanced 3x3 right rail. */
.dashboard-page .ad-studio-view #adStudioToolsPanel .ad-studio-launch-card {
    min-width: 0!important;
    min-height: 112px!important;
    height: auto!important;
    padding: 9px!important;
}

.dashboard-page .ad-studio-view #adStudioToolsPanel .ad-card-icon.icon-image img {
    width: 34px!important;
    height: 34px!important;
}

.dashboard-page .ad-studio-view #adStudioToolsPanel .ad-card-icon {
    margin-bottom: 5px!important;
}

.dashboard-page .ad-studio-view #adStudioToolsPanel .ad-studio-launch-card strong {
    margin-bottom: 3px!important;
    font-size: 9px!important;
    line-height: 1.15!important;
}

.dashboard-page .ad-studio-view #adStudioToolsPanel .ad-studio-launch-card small {
    min-height: 21px!important;
    font-size: 7px!important;
    line-height: 1.25!important;
}

.dashboard-page .ad-studio-view #adStudioToolsPanel .ad-card-open {
    min-height: 22px!important;
    margin-top: 5px!important;
    padding: 0 6px!important;
    font-size: 6.5px!important;
}

/* Generated Videos belongs directly under the tool rail. */
.dashboard-page .ad-studio-view #adGeneratedVideosPanel {
    min-height: 165px!important;
}

.dashboard-page .ad-studio-view #adGeneratedVideosPanel .ad-generated-videos-head {
    margin-bottom: 7px!important;
}

.dashboard-page .ad-studio-view .ad-timeline-edit-tools {
    display: grid!important;
    gap: 7px!important;
    margin: 7px 0 9px!important;
    padding: 8px!important;
    border: 1px solid rgba(56,138,220,.22)!important;
    border-radius: 8px!important;
    background: rgba(5,15,28,.36)!important;
}

.dashboard-page .ad-studio-view .ad-editor-edit-selected-head.compact {
    display: flex!important;
    align-items: center!important;
    justify-content: space-between!important;
    gap: 10px!important;
    margin: 0!important;
}

.dashboard-page .ad-studio-view .ad-editor-edit-selected-head.compact h4 {
    font-size: 10px!important;
}

.dashboard-page .ad-studio-view .ad-editor-edit-selected-head.compact small {
    font-size: 7px!important;
}

/* Nine selected-media tools remain one horizontal toolbar on wide screens. */
.dashboard-page .ad-studio-view .ad-editor-button-grid.horizontal.timeline-tools {
    display: grid!important;
    grid-template-columns: repeat(9,minmax(72px,1fr))!important;
    gap: 5px!important;
}

.dashboard-page .ad-studio-view .ad-editor-button-grid.horizontal.timeline-tools button {
    min-width: 0!important;
    width: 100%!important;
    padding-inline: 5px!important;
    font-size: 7px!important;
    white-space: nowrap!important;
}

/* Reset all old grid placement in normal mode. A new V6 storage key means
   no previous experimental transform can be restored into this baseline. */
.dashboard-page .ad-studio-view:not(.layout-edit-mode) [data-ad-layout-panel]:not(.ad-layout-custom-sized) {
    position: relative!important;
    inset: auto!important;
    transform: none!important;
    z-index: auto!important;
    overflow: visible!important;
}

/* Laptop / medium dashboard: two deliberate columns. */
@media (max-width:1320px) and (min-width:821px){
    .dashboard-page .ad-studio-view .ad-studio-top-workspace {
        grid-template-columns: minmax(0,1.55fr) minmax(300px,.85fr)!important;
        grid-template-areas: "monitor inspector"
      "tools generated"
      "timeline timeline"!important;
    }

    .dashboard-page .ad-studio-view #adStudioToolsPanel {
        grid-template-columns: repeat(3,minmax(0,1fr))!important;
    }

    .dashboard-page .ad-studio-view .ad-editor-button-grid.horizontal.timeline-tools {
        grid-template-columns: repeat(5,minmax(85px,1fr))!important;
    }
}

/* Mobile/tablet: normal document flow, no free positioning. */
@media (max-width:820px){
    .dashboard-page .ad-studio-view .ad-studio-top-workspace {
        display: grid!important;
        grid-template-columns: minmax(0,1fr)!important;
        grid-template-areas: "monitor"
      "inspector"
      "tools"
      "generated"
      "timeline"!important;
        gap: 10px!important;
    }

    .dashboard-page .ad-studio-view #adEditorMonitorPanel,
    .dashboard-page .ad-studio-view #adEditorInspectorPanel,
    .dashboard-page .ad-studio-view #adStudioToolsPanel,
    .dashboard-page .ad-studio-view #adGeneratedVideosPanel,
    .dashboard-page .ad-studio-view #adEditorTimelinePanel {
        grid-column: auto!important;
        grid-row: auto!important;
        width: 100%!important;
        height: auto!important;
        min-height: 0!important;
        transform: none!important;
        overflow: visible!important;
    }

    .dashboard-page .ad-studio-view #adStudioToolsPanel {
        grid-template-columns: repeat(2,minmax(0,1fr))!important;
    }

    .dashboard-page .ad-studio-view .ad-editor-button-grid.horizontal.timeline-tools {
        grid-template-columns: repeat(3,minmax(0,1fr))!important;
    }
}

@media (max-width:520px){
    .dashboard-page .ad-studio-view #adStudioToolsPanel {
        grid-template-columns: 1fr!important;
    }

    .dashboard-page .ad-studio-view .ad-editor-button-grid.horizontal.timeline-tools {
        grid-template-columns: repeat(2,minmax(0,1fr))!important;
    }
}

/* ============================================================
   PRODUCTION — EZDTF transfer sizing center
   ============================================================ */
.production-size-summary {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.production-size-summary article {
    min-height: 88px;
    padding: 14px;
    border: 1px solid #1b6f91;
    border-radius: 8px;
    background: linear-gradient(145deg,rgba(3,22,38,.94),rgba(7,14,29,.91));
    box-shadow: inset 0 0 24px rgba(21,217,255,.04);
}

.production-size-summary span {
    display: block;
    color: #6eeeff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.production-size-summary strong {
    display: block;
    margin: 6px 0 4px;
    color: #f4fbff;
    font-size: 22px;
}

.production-size-summary small {
    color: #8397aa;
    font-size: 8px;
    line-height: 1.35;
}

.production-transfer-panel {
    margin-bottom: 18px;
    overflow: visible;
}

.production-transfer-head {
    flex-wrap: wrap;
}

.production-source-badge {
    padding: 5px 8px;
    border: 1px solid #b741e1;
    border-radius: 999px;
    background: rgba(134,38,166,.16);
    color: #ee86ff;
    font-size: 8px;
    font-weight: 900;
}

.production-source-badge.live {
    border-color: #19d494;
    background: rgba(25,212,148,.12);
    color: #55f1bb;
}

.production-transfer-list {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.production-order-card {
    border: 1px solid #25435f;
    border-radius: 9px;
    background: linear-gradient(145deg,rgba(4,18,33,.96),rgba(7,15,29,.94));
    overflow: hidden;
    transition: .18s;
}

.production-order-card.production-flash {
    border-color: #23e8ff;
    box-shadow: 0 0 24px rgba(35,232,255,.25);
}

.production-order-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border-bottom: 1px solid #1e344c;
    background: rgba(4,12,23,.64);
}

.production-order-kicker {
    color: #23e8ff;
    font-size: 9px;
    font-weight: 900;
}

.production-order-top h3 {
    margin: 4px 0 0;
    font-size: 13px;
}

.production-order-state {
    display: flex;
    align-items: center;
    gap: 8px;
}

.production-order-state button,
.production-piece-actions button {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #168ab9;
    border-radius: 5px;
    background: #07182b;
    color: #7feeff;
    font-size: 8px;
    font-weight: 900;
    cursor: pointer;
}

.production-order-state button:hover,
.production-piece-actions button:hover {
    filter: brightness(1.18);
}

.production-piece-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 11px;
    padding: 12px;
    border-left-width: 0px;
}

.production-piece {
    min-width: 0;
    display: grid;
    grid-template-columns: 150px minmax(0,1fr);
    gap: 12px;
    padding: 10px;
    border: 1px solid #203b57;
    border-radius: 8px;
    background: rgba(3,13,24,.78);
}

.production-piece-art {
    position: relative;
    min-height: 150px;
    display: grid;
    place-items: center;
    border: 1px solid #173d59;
    border-radius: 7px;
    background: radial-gradient(circle,rgba(19,137,184,.16),transparent 60%),#020b14;
    overflow: hidden;
}

.production-piece-art img {
    width: 100%;
    height: 100%;
    max-height: 165px;
    object-fit: contain;
}

.production-piece-art>span {
    position: absolute;
    left: 7px;
    bottom: 7px;
    padding: 4px 6px;
    border: 1px solid #14bce6;
    border-radius: 4px;
    background: rgba(0,16,29,.88);
    color: #65efff;
    font-size: 7px;
    font-weight: 900;
}

.production-piece-copy {
    min-width: 0;
}

.production-piece-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.production-piece-title strong {
    font-size: 11px;
}

.tag.red {
    color: #ff5b78;
}

.production-piece dl {
    margin: 9px 0 10px;
    display: grid;
    gap: 0;
}

.production-piece dl>div {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid #162c41;
    font-size: 8px;
}

.production-piece dt {
    color: #8196aa;
}

.production-piece dd {
    margin: 0;
    color: #dce8f3;
    font-weight: 700;
}

.production-piece .transfer-measure {
    margin: 2px 0;
    padding: 8px;
    border: 1px solid #0f9fc9;
    border-radius: 5px;
    background: linear-gradient(90deg,rgba(8,93,125,.24),rgba(89,22,111,.18));
}

.production-piece .transfer-measure dt {
    color: #51eaff;
}

.production-piece .transfer-measure dd {
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .02em;
}

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

.production-piece-actions button.active {
    border-color: #d84fff;
    background: rgba(119,26,142,.25);
    color: #f1a0ff;
}

.production-empty {
    padding: 30px;
    text-align: center;
}

.production-board-heading {
    margin: 20px 0 10px;
}

.production-board-heading h3 {
    margin: 2px 0 4px;
    font-size: 15px;
}

.production-board-heading p {
    margin: 0;
    color: #8094a8;
    font-size: 9px;
}

@media (max-width:1400px){
    .production-size-summary {
        grid-template-columns: repeat(3,1fr);
    }

    .production-piece-grid {
        grid-template-columns: 1fr;
    }

    .production-piece {
        grid-template-columns: 135px 1fr;
    }
}

@media (max-width:820px){
    .production-size-summary {
        grid-template-columns: 1fr 1fr;
    }

    .production-order-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .production-piece {
        grid-template-columns: 100px 1fr;
    }

    .production-piece-art {
        min-height: 112px;
    }

    .production-piece dl>div {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .production-piece .transfer-measure dd {
        font-size: 14px;
    }
}

@media (max-width:520px){
    .production-size-summary {
        grid-template-columns: 1fr;
    }

    .production-piece {
        grid-template-columns: 1fr;
    }

    .production-piece-art {
        min-height: 160px;
    }

    .production-piece-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .production-piece-actions button {
        width: 100%;
    }
}

.admin-nav-btn {
    text-decoration: none;
}

/* Order production files — private print art + customer placement mockups */
.order-assets-panel {
    margin-top: 14px;
    overflow: hidden;
}

.order-assets-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.order-assets-head>div {
    display: grid;
    gap: 3px;
}

.order-assets-head h2 {
    margin: 0;
}

.order-assets-kicker {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    color: #7cdfff;
}

.order-assets-head>strong {
    font-size: 12px;
    color: #dff8ff;
    border: 1px solid rgba(110,218,255,.25);
    border-radius: 7px;
    padding: 8px 10px;
    background: rgba(48,164,207,.08);
}

.order-assets-layout {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr);
    min-height: 430px;
}

.order-assets-list {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 14px;
    border-right: 1px solid rgba(121,207,239,.14);
}

.order-asset-card {
    display: grid;
    grid-template-columns: 112px minmax(0,1fr);
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(119,204,237,.17);
    border-radius: 9px;
    background: rgba(2,12,23,.46);
}

.order-asset-card.print {
    border-color: rgba(104,231,255,.32);
    box-shadow: inset 3px 0 rgba(83,214,255,.7);
}

.order-asset-card.mockup {
    box-shadow: inset 3px 0 rgba(155,173,255,.55);
}

.order-asset-thumb {
    height: 102px;
    border: 1px solid rgba(122,212,244,.16);
    border-radius: 7px;
    background: linear-gradient(145deg,#08192a,#020a14);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.order-asset-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.order-asset-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.order-asset-copy>span {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .09em;
    color: #75dfff;
}

.order-asset-copy>strong {
    margin-top: 5px;
    color: #eefaff;
    font-size: 13px;
}

.order-asset-copy>small {
    margin-top: 5px;
    color: #7899ae;
    font-size: 10px;
    line-height: 1.4;
}

.order-asset-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.order-asset-actions button,
.order-asset-actions a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid rgba(111,219,255,.34);
    border-radius: 6px;
    background: rgba(9,43,66,.72);
    color: #dff8ff;
    font-size: 9px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.order-asset-actions a {
    border-color: rgba(91,240,206,.34);
}

.order-asset-preview {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: rgba(1,9,18,.28);
}

.order-asset-preview-stage {
    min-height: 300px;
    border: 1px solid rgba(122,211,243,.19);
    border-radius: 10px;
    background: radial-gradient(circle at center,rgba(70,190,240,.10),transparent 45%),#020a14;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.order-asset-preview-stage img {
    width: 100%;
    height: 100%;
    max-height: 390px;
    object-fit: contain;
}

.order-asset-preview>strong {
    font-size: 13px;
    color: #e9f9ff;
}

.order-asset-preview>p {
    margin: 0;
    color: #829fb2;
    font-size: 10.5px;
    line-height: 1.55;
}

.order-asset-key {
    display: grid;
    gap: 7px;
    margin-top: auto;
}

.order-asset-key span {
    padding: 8px;
    border: 1px solid rgba(119,201,232,.13);
    border-radius: 7px;
    color: #7f9caf;
    font-size: 9.5px;
    line-height: 1.45;
}

.order-asset-key b {
    display: block;
    color: #a9eaff;
    font-size: 9px;
    letter-spacing: .06em;
}

.order-asset-empty {
    padding: 20px;
    border: 1px dashed rgba(119,207,239,.24);
    border-radius: 9px;
    display: grid;
    gap: 6px;
}

.order-asset-empty strong {
    color: #dff7ff;
}

.order-asset-empty span {
    color: #7895aa;
    font-size: 11px;
}

@media (max-width:1050px){
    .order-assets-layout {
        grid-template-columns: 1fr;
    }

    .order-assets-list {
        border-right: 0;
        border-bottom: 1px solid rgba(121,207,239,.14);
    }

    .order-asset-preview-stage {
        min-height: 260px;
    }
}

@media (max-width:620px){
    .order-assets-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .order-asset-card {
        grid-template-columns: 84px minmax(0,1fr);
    }

    .order-asset-thumb {
        height: 84px;
    }

    .order-asset-actions {
        display: grid;
    }

    .order-asset-actions>* {
        width: 100%;
        box-sizing: border-box;
    }
}

/* =========================================================
   v20 global admin theme override — blue / white / gold
   Applies to the full DA OUTLET COMMAND DASHBOARD only.
   ========================================================= */
:root {
    --bg: #020814;
    --panel: #071220;
    --panel2: #091729;
    --line: #27507a;
    --cyan: #9be8ff;
    --blue: #33baff;
    --purple: #e2bf72;
    --magenta: #f0d28b;
    --green: #5fe7b9;
    --orange: #e4bf72;
    --text: #f7fbff;
    --muted: #96aac0;
    --danger: #ff7f9a;
}

html,
body,
.admin-login-page {
    background: #020814!important;
    color: var(--text)!important;
}

.dashboard-bg {
    background: linear-gradient(180deg,rgba(2,8,20,.52),rgba(2,8,20,.78)),url('../../assets/images/admin/command-center-background.png') center top/cover no-repeat!important;
    filter: saturate(.96);
}

.admin-sidebar {
    border-right: 1px solid rgba(73,156,219,.34)!important;
    background: linear-gradient(180deg,rgba(5,15,30,.97),rgba(6,16,31,.93))!important;
    box-shadow: 18px 0 55px rgba(0,0,0,.28),inset -1px 0 0 rgba(129,206,255,.04)!important;
}

.side-brand {
    border-bottom: 1px solid rgba(65,146,209,.20)!important;
}

.side-brand img {
    filter: drop-shadow(0 0 7px rgba(111,212,255,.24))!important;
}

.side-brand strong {
    background: linear-gradient(90deg,#eaf9ff,#96deff 52%,#e3c37a)!important;
    -webkit-background-clip: text!important;
    color: transparent!important;
}

.side-brand span {
    color: #a8e9ff!important;
}

.admin-nav-btn {
    color: #e2edf8!important;
}

.admin-nav-btn>span {
    color: #8fbfff!important;
}

.admin-nav-btn>b {
    background: rgba(48,52,64,.76)!important;
    border: 1px solid #e4bf72!important;
    color: #fff8df!important;
}

.admin-nav-btn:hover {
    background: rgba(31,75,112,.18)!important;
}

.admin-nav-btn.active {
    border-color: #4fc9ff!important;
    background: linear-gradient(90deg,rgba(12,101,151,.35),rgba(64,84,108,.26))!important;
    box-shadow: 0 0 16px rgba(79,201,255,.17),inset 0 0 18px rgba(227,196,121,.06)!important;
}

.crew-card {
    border: 1px solid rgba(95,182,233,.54)!important;
    background: linear-gradient(145deg,rgba(10,27,48,.88),rgba(12,22,39,.80))!important;
    box-shadow: 0 0 25px rgba(90,184,235,.12)!important;
}

.crew-card strong {
    color: #fef8e7!important;
    text-shadow: -2px 2px #63d6ff!important;
}

.crew-card p {
    color: #c3d1de!important;
}

.crew-card span {
    color: #a8e8ff!important;
}

.crew-card a {
    border: 1px solid #68d7ff!important;
    color: #f7fcff!important;
    background: rgba(14,48,73,.30)!important;
}

.admin-topbar {
    border-bottom: 1px solid rgba(74,153,214,.26)!important;
    background: rgba(2,8,20,.90)!important;
}

.admin-title-wrap h1 {
    background: linear-gradient(90deg,#eff9ff,#95deff 55%,#e4c37c)!important;
    -webkit-background-clip: text!important;
    color: transparent!important;
}

.data-badge {
    background: rgba(228,191,114,.12)!important;
    border: 1px solid rgba(228,191,114,.42)!important;
    color: #f6dda4!important;
}

.admin-search {
    border: 1px solid rgba(61,133,193,.34)!important;
    background: #071525!important;
    box-shadow: inset 0 0 16px rgba(81,184,240,.03)!important;
}

.admin-search input {
    color: #eef8ff!important;
}

.admin-search kbd {
    border: 1px solid rgba(95,127,162,.58)!important;
    color: #adc0d3!important;
}

.bell,
.owner-menu,
.logout-btn,
.mobile-menu {
    color: #e7f1fb!important;
}

.bell b {
    background: #5a4a2c!important;
    border: 1px solid #e4bf72!important;
    color: #fff9e2!important;
}

.owner-menu img {
    border: 1px solid #67d8ff!important;
}

.owner-menu small {
    color: #9eb0c4!important;
}

.metric-card,
.dash-panel,
.kanban-column,
.design-admin-card,
.review-admin-card,
.profit-big-top div,
.inventory-card,
.settings-card,
.shipping-row button,
.review-admin-actions button {
    border-color: rgba(64,141,201,.38)!important;
    background: linear-gradient(145deg,rgba(6,19,35,.94),rgba(8,18,32,.90))!important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018),0 9px 25px rgba(0,0,0,.10),0 0 18px rgba(88,188,236,.04)!important;
}

.metric-card.blue,
.metric-card.purple,
.metric-card.teal,
.metric-card.magenta {
    border-color: rgba(84,171,227,.52)!important;
}

.metric-card span,
.panel-head h2,
.detail-cell h3,
.view-heading h2,
.kanban-head,
.design-admin-copy strong,
.review-admin-card strong,
.shipping-row strong,
.inventory-card h3,
.settings-card h3,
.profit-big-top strong {
    color: #00aaff;
}

.metric-card small em,
.table-foot,
.activity-row small,
.view-heading p,
.design-admin-copy p,
.customer-row span,
.review-admin-card p,
.profit-big-top span,
.cost-editor label,
.cost-editor>p,
.stock-row,
.settings-card p,
.setting-rule span,
.muted,
.orders-table th,
.orders-toolbar input,
.orders-toolbar select {
    color: #9db1c5!important;
}

.metric-card small {
    color: #72e3c2!important;
}

.metric-card i,
.order-id,
.shipping-row strong,
.kanban-card strong {
    color: #8ee2ff!important;
}

.panel-head {
    border-bottom: 1px solid rgba(73,147,208,.22)!important;
    background: linear-gradient(180deg,rgba(10,20,35,.25),rgba(10,20,35,.10))!important;
}

.mini-tabs button,
.outline-action,
.text-action,
.panel-head select,
.pagination button,
.notes-cell button,
.method-cell button,
.orders-toolbar input,
.orders-toolbar select,
.cost-editor input,
.stock-row input,
.settings-card button,
.cost-editor button,
.shipping-row button,
.review-admin-actions button,
.admin-login-form input,
.admin-login-form button,
.primary-view-action {
    border-color: rgba(90,169,226,.44)!important;
    background: #081629!important;
    color: #e5f2fc!important;
}

.mini-tabs button.active {
    border-color: #6fd8ff!important;
    color: #fbfeff!important;
    background: rgba(13,111,157,.24)!important;
    box-shadow: 0 0 8px rgba(111,216,255,.15)!important;
}

.outline-action,
.text-action {
    color: #96e3ff!important;
}

.primary-view-action,
.cost-editor button,
.settings-card button,
.admin-login-form button {
    border-color: #8ddfff!important;
    background: linear-gradient(90deg,rgba(10,109,151,.62),rgba(91,107,128,.42))!important;
    color: #ffffff!important;
    box-shadow: 0 0 16px rgba(96,195,241,.10),inset 0 0 18px rgba(228,191,114,.04)!important;
}

.orders-table th {
    border-bottom: 1px solid rgba(72,133,184,.22)!important;
}

.orders-table td {
    border-bottom: 1px solid rgba(52,97,137,.22)!important;
    color: #dce7f3!important;
}

.orders-table tbody tr:hover {
    background: rgba(27,103,145,.13)!important;
}

.orders-table tbody tr.selected {
    outline: 1px solid #63d8ff!important;
    background: linear-gradient(90deg,rgba(10,112,154,.20),rgba(73,83,101,.18))!important;
    box-shadow: inset 0 0 15px rgba(104,213,255,.06)!important;
}

.tag {
    background: rgba(0,0,0,.18)!important;
}

.tag.green {
    color: #59e5b8!important;
}

.tag.orange {
    color: #f2cc84!important;
}

.tag.blue {
    color: #8cdcff!important;
}

.tag.purple {
    color: #e8cf8f!important;
}

.tag.cyan {
    color: #b5efff!important;
}

.tag.grey {
    color: #a4b3c3!important;
}

.pagination button.active {
    border-color: #7bdfff!important;
    background: #0d5e7f!important;
    color: #fff!important;
}

.detail-cell {
    border-right: 1px solid rgba(74,138,190,.22)!important;
    border-bottom: 1px solid rgba(74,138,190,.22)!important;
}

.detail-cell p,
.customer-row strong,
.review-admin-card strong,
.profit-line,
strong,
.profit-line strong,
.profit-big-top strong,
.setting-rule strong {
    color: #eef8ff!important;
}

.method-cell {
    border: 1px solid rgba(96,180,234,.54)!important;
    box-shadow: inset 0 0 23px rgba(94,180,233,.10)!important;
    background: linear-gradient(145deg,rgba(8,30,51,.75),rgba(12,22,36,.72))!important;
}

.method-cell strong {
    color: #fff3cf!important;
}

.method-cell button {
    border: 1px solid #e4bf72!important;
    background: rgba(69,59,30,.25)!important;
    color: #fff3cf!important;
}

.shirt-preview-area {
    background: radial-gradient(circle at center,rgba(112,207,255,.12),transparent 55%),linear-gradient(rgba(28,96,130,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(28,96,130,.14) 1px,transparent 1px)!important;
    background-size: auto,28px 28px,28px 28px!important;
}

.back-preview-copy {
    color: #b0ecff!important;
}

.back-preview-copy b {
    color: #fff0ca!important;
}

.back-preview-copy em {
    color: #ff9bb0!important;
}

.action-grid button {
    border: 1px solid rgba(88,176,229,.52)!important;
    background: linear-gradient(145deg,#08192d,#081423)!important;
    color: #d8f2ff!important;
}

.action-grid .primary {
    border-color: #e4bf72!important;
    color: #fff2d0!important;
    background: rgba(66,58,33,.20)!important;
}

.action-grid .success {
    border-color: #4fd4a2!important;
    color: #77f0c1!important;
}

.action-status,
.status-dot,
.activity-row i {
    color: #9be5ff!important;
    border-color: #84ddff!important;
}

.activity-row {
    border-bottom: 1px solid rgba(73,136,189,.18)!important;
    color: #b9c8d8!important;
}

.view-heading span {
    color: #a8eaff!important;
}

.orders-toolbar {
    border-bottom: 1px solid rgba(74,136,187,.22)!important;
}

.kanban-column {
    background: rgba(7,18,32,.84)!important;
}

.kanban-head b {
    background: #113651!important;
    color: #a5ebff!important;
}

.kanban-card {
    border: 1px solid rgba(66,140,194,.34)!important;
    background: linear-gradient(145deg,#08182b,#091524)!important;
}

.kanban-card span {
    color: #dae5f0!important;
}

.kanban-card small {
    color: #98adbe!important;
}

.design-admin-image {
    background: radial-gradient(circle,rgba(115,206,255,.14),transparent 55%),#06111d!important;
}

.method-chip {
    border: 1px solid #e4bf72!important;
    color: #fff1cb!important;
    background: rgba(65,57,34,.18)!important;
}

.customer-row {
    border-bottom: 1px solid rgba(75,137,189,.18)!important;
}

.review-admin-card {
    border: 1px solid rgba(66,140,194,.34)!important;
}

.approve-review {
    border: 1px solid #4fcf9d!important;
}

.deny-review {
    border: 1px solid #e5748b!important;
}

.shipping-row {
    border-bottom: 1px solid rgba(75,137,189,.18)!important;
}

.profit-big-top div,
.inventory-card {
    border: 1px solid rgba(66,140,194,.34)!important;
}

.cost-editor input,
.stock-row input,
.admin-login-form input {
    background: #061323!important;
    color: #fff!important;
}

.gold-ticket {
    box-shadow: 0 0 24px rgba(255,193,42,.19)!important;
}

.settings-card {
    border: 1px solid rgba(66,140,194,.34)!important;
}

.setting-rule {
    border: 1px solid rgba(89,176,228,.48)!important;
    background: rgba(17,73,101,.11)!important;
}

.setting-rule strong {
    color: #b8eeff!important;
}

.setting-rule.purple {
    border-color: #e4bf72!important;
    background: rgba(85,67,22,.12)!important;
}

.setting-rule.purple strong {
    color: #fff0ca!important;
}

.warning {
    color: #ffd18a!important;
}

.admin-toast {
    border: 1px solid #77ddff!important;
    background: rgba(5,18,33,.94)!important;
    color: #f3fbff!important;
}

.admin-login-grid {
    background: radial-gradient(circle at 50% 30%,rgba(37,115,190,.20),transparent 28%),radial-gradient(circle at 65% 75%,rgba(228,191,114,.12),transparent 30%),linear-gradient(rgba(22,75,112,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(22,75,112,.13) 1px,transparent 1px)!important;
    background-size: auto,auto,46px 46px,46px 46px!important;
}

.admin-login-card {
    border: 1px solid rgba(84,161,215,.42)!important;
    background: linear-gradient(145deg,rgba(6,20,36,.95),rgba(11,20,32,.93))!important;
    box-shadow: 0 30px 80px rgba(0,0,0,.43),0 0 34px rgba(86,198,242,.10),inset 0 1px 0 rgba(255,255,255,.04)!important;
}

.login-kicker {
    color: #a5e7ff!important;
}

.admin-login-card h1 {
    background: linear-gradient(90deg,#eef9ff,#9bdfff,#e4c37c)!important;
    -webkit-background-clip: text!important;
    color: transparent!important;
}

.admin-login-card>p,
.login-status {
    color: #a4b7c8!important;
}

.admin-login-form label {
    color: #d2deea!important;
}

.admin-login-form input:focus {
    border-color: #7fdfff!important;
    box-shadow: 0 0 0 3px rgba(127,223,255,.07)!important;
}

.back-store {
    color: #a5eaff!important;
}

/* =========================================================
   v20 final dashboard identity polish — blue / white / gold
   Focuses on branded text, icons, crew area, and command-center identity.
   ========================================================= */
.dashboard-page,
.admin-login-page {
    --store-cyan: #98e6ff;
    --store-purple: #e4c37c;
    --store-pink: #fff0c8;
    --store-orange: #e4c37c;
    --store-line: rgba(71,154,219,.74);
}

.dashboard-page::before {
    background: radial-gradient(circle at 15% 12%,rgba(92,206,255,.12),transparent 25%),
    radial-gradient(circle at 82% 12%,rgba(228,195,124,.10),transparent 26%),
    radial-gradient(circle at 72% 78%,rgba(172,228,255,.08),transparent 28%),
    radial-gradient(circle at 30% 84%,rgba(228,195,124,.06),transparent 25%),
    linear-gradient(180deg,rgba(2,7,18,.16),rgba(2,7,18,.34))!important;
}

.dashboard-page .side-brand strong,
.dashboard-page .admin-title-wrap h1,
.dashboard-page .ad-studio-hero h2 em,
.admin-login-card h1 {
    background: linear-gradient(90deg,#ffffff 0%, #bcecff 34%, #78d8ff 60%, #e4c37c 100%)!important;
    -webkit-background-clip: text!important;
    background-clip: text!important;
    color: transparent!important;
    text-shadow: none!important;
}

.dashboard-page .side-brand span,
.dashboard-page .ad-studio-eyebrow,
.admin-login-page .login-kicker {
    color: #dff7ff!important;
    letter-spacing: .14em!important;
}

.dashboard-page .admin-nav-btn>span {
    color: #9edfff!important;
    text-shadow: 0 0 12px rgba(82,196,255,.12)!important;
}

.dashboard-page .admin-nav-btn.active>span,
.dashboard-page .admin-nav-btn:hover>span {
    color: #f4e4b5!important;
    text-shadow: 0 0 14px rgba(228,195,124,.18)!important;
}

.dashboard-page .admin-nav-btn>b,
.dashboard-page .bell b {
    background: rgba(72,63,35,.48)!important;
    border-color: rgba(228,195,124,.78)!important;
    color: #fff7df!important;
}

.dashboard-page .crew-card {
    border-color: rgba(81,176,236,.60)!important;
    background: linear-gradient(145deg,rgba(9,28,47,.90),rgba(11,22,39,.82))!important;
    box-shadow: 0 0 24px rgba(97,203,255,.09),inset 0 0 24px rgba(228,195,124,.035)!important;
}

.dashboard-page .crew-card strong {
    background: linear-gradient(90deg,#ffffff 0%, #bdeeff 38%, #7edbff 68%, #e4c37c 100%)!important;
    -webkit-background-clip: text!important;
    background-clip: text!important;
    color: transparent!important;
    text-shadow: none!important;
}

.dashboard-page .crew-card p {
    color: #cfdae6!important;
}

.dashboard-page .crew-card span,
.dashboard-page .crew-photo-help {
    color: #bbeeff!important;
}

.dashboard-page .crew-photo-slot,
.dashboard-page .crew-photo-add {
    border-color: rgba(93,192,243,.62)!important;
    background: rgba(6,18,31,.86)!important;
    box-shadow: inset 0 0 12px rgba(89,191,242,.04),0 0 12px rgba(228,195,124,.03)!important;
}

.dashboard-page .crew-photo-add {
    color: #fff2ce!important;
}

.dashboard-page .crew-card a {
    border-color: rgba(98,203,255,.70)!important;
    color: #fffaf0!important;
    background: linear-gradient(90deg,rgba(84,187,238,.18),rgba(228,195,124,.14))!important;
    box-shadow: 0 0 16px rgba(87,194,245,.08)!important;
}

.dashboard-page .dashboard-page-header img,
.dashboard-page .side-brand img,
.dashboard-page .owner-menu img,
.admin-login-page .login-logo {
    filter: brightness(1.06) saturate(.92) contrast(1.02) hue-rotate(-18deg) drop-shadow(0 0 16px rgba(105,210,255,.14)) drop-shadow(0 0 10px rgba(228,195,124,.08)) !important;
}

.dashboard-page .dashboard-page-header {
    border-color: rgba(77,166,226,.34)!important;
    box-shadow: 0 16px 40px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.03), 0 0 18px rgba(91,197,247,.04)!important;
}

.dashboard-page .dashboard-page-header::after {
    background: linear-gradient(90deg,transparent,rgba(128,218,255,.45),rgba(228,195,124,.28),transparent)!important;
}

.dashboard-page .owner-menu span {
    color: #eef7ff!important;
}

.dashboard-page .owner-menu small {
    color: #b8c8d7!important;
}

/* =========================================================
   PACKAGE 20 — transparent frosted admin + Pinegrow controls
   Dashboard only. Storefront styling is intentionally untouched.

   PINEGROW PER-PANEL CONTROLS
   Select any element marked `data-pg-panel="editable"` / `.pg-editable-panel`
   and override these CSS custom properties in Pinegrow's Style panel:
      --pg-panel-rgb: 7 22 39;          first glass tint (R G B)
      --pg-panel-rgb-2: 4 13 25;        second glass tint
      --pg-panel-alpha: .24;            transparency / opacity
      --pg-panel-alpha-2: .14;          lower gradient transparency
      --pg-panel-border-rgb: 91 190 240;
      --pg-panel-border-alpha: .32;
      --pg-panel-blur: 18px;
      --pg-panel-saturation: 1.22;
      --pg-panel-radius: 10px;

   Optional proportion overrides on an individual panel:
      --pg-panel-width: 70%;
      --pg-panel-height: 520px;
      --pg-panel-min-height: 300px;
      --pg-panel-max-height: 760px;
      --pg-panel-grid-column: 1 / -1;
      --pg-panel-grid-row: auto;
   Leave an optional variable unset and the page's normal responsive layout wins.
   ========================================================= */
.dashboard-page {
    --pg-panel-rgb: 7 22 39;
    --pg-panel-rgb-2: 4 13 25;
    --pg-panel-alpha: .24;
    --pg-panel-alpha-2: .14;
    --pg-panel-border-rgb: 91 190 240;
    --pg-panel-border-alpha: .32;
    --pg-panel-blur: 18px;
    --pg-panel-saturation: 1.22;
    --pg-panel-radius: 10px;
    --da-sidebar-width: 290px;
}

.dashboard-page .pg-editable-panel {
    background: linear-gradient(145deg,
      rgb(var(--pg-panel-rgb) / var(--pg-panel-alpha)),
      rgb(var(--pg-panel-rgb-2) / var(--pg-panel-alpha-2)))!important;
    border-color: rgb(var(--pg-panel-border-rgb) / var(--pg-panel-border-alpha))!important;
    border-radius: var(--pg-panel-radius)!important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 0 32px rgba(88,199,247,.024),
      0 14px 36px rgba(0,0,0,.10)!important;
    backdrop-filter: blur(var(--pg-panel-blur)) saturate(var(--pg-panel-saturation))!important;
    -webkit-backdrop-filter: blur(var(--pg-panel-blur)) saturate(var(--pg-panel-saturation))!important;
    width: var(--pg-panel-width);
    height: var(--pg-panel-height);
    min-height: var(--pg-panel-min-height);
    max-height: var(--pg-panel-max-height);
    grid-column: var(--pg-panel-grid-column);
    grid-row: var(--pg-panel-grid-row);
}

/* Nested glass areas stay readable without turning opaque again. */
.dashboard-page .pg-editable-panel :is(.detail-cell,.kanban-card,.order-asset-card,.order-asset-preview,.setting-rule,.outreach-email-copy,.outreach-logo-preview-card,.outreach-logo-form) {
    background-color: rgba(5,18,31,.24)!important;
    backdrop-filter: blur(10px) saturate(1.12);
    -webkit-backdrop-filter: blur(10px) saturate(1.12);
}

.dashboard-page .admin-sidebar {
    background: linear-gradient(180deg,rgba(5,15,30,.58),rgba(6,16,31,.46))!important;
    backdrop-filter: blur(22px) saturate(1.25)!important;
    -webkit-backdrop-filter: blur(22px) saturate(1.25)!important;
}

.dashboard-page .admin-topbar {
    background: rgba(2,8,20,.48)!important;
    backdrop-filter: blur(22px) saturate(1.20)!important;
    -webkit-backdrop-filter: blur(22px) saturate(1.20)!important;
}

.dashboard-page .crew-card {
    background: linear-gradient(145deg,rgba(9,28,47,.32),rgba(11,22,39,.20))!important;
    backdrop-filter: blur(18px) saturate(1.2)!important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2)!important;
}

/* Desktop sidebar auto-hide. The main grid really changes width, so dashboard panels
   reflow instead of simply being covered by an overlay. */
@media (min-width:821px){
    .dashboard-page .admin-layout.sidebar-autohide {
        grid-template-columns: 0 minmax(0,1fr)!important;
        transition: grid-template-columns .24s ease;
    }

    .dashboard-page .admin-layout.sidebar-autohide.sidebar-visible {
        grid-template-columns: var(--da-sidebar-width) minmax(0,1fr)!important;
    }

    .dashboard-page .admin-layout.sidebar-autohide .admin-sidebar {
        width: var(--da-sidebar-width)!important;
        transform: translateX(calc(-1 * var(--da-sidebar-width) - 8px));
        opacity: 0;
        pointer-events: none;
        transition: transform .24s ease,opacity .18s ease;
    }

    .dashboard-page .admin-layout.sidebar-autohide.sidebar-visible .admin-sidebar {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .dashboard-page .admin-layout.sidebar-autohide .admin-main {
        min-width: 0!important;
        width: 100%!important;
        container-type: inline-size;
        container-name: daAdminMain;
    }

    .dashboard-page .mobile-menu {
        display: grid!important;
        place-items: center;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        border: 1px solid rgba(99,199,244,.30)!important;
        border-radius: 7px;
        background: rgba(6,24,40,.30)!important;
        backdrop-filter: blur(10px);
    }

    .dashboard-page .mobile-menu:hover {
        border-color: rgba(228,195,124,.58)!important;
        color: #fff0c7!important;
    }

    .dashboard-page .sidebar-reveal-tab {
        position: fixed;
        left: 0;
        top: 50%;
        z-index: 120;
        width: 28px;
        height: 72px;
        transform: translateY(-50%);
        display: grid;
        place-items: center;
        border: 1px solid rgba(95,196,241,.35);
        border-left: 0;
        border-radius: 0 10px 10px 0;
        background: rgba(5,22,38,.56);
        color: #a9eaff;
        backdrop-filter: blur(16px) saturate(1.2);
        -webkit-backdrop-filter: blur(16px) saturate(1.2);
        cursor: pointer;
        box-shadow: 8px 0 22px rgba(0,0,0,.12);
        transition: opacity .18s ease,transform .18s ease;
    }

    .dashboard-page .admin-layout.sidebar-visible ~ .sidebar-reveal-tab,
    .dashboard-page.sidebar-visible .sidebar-reveal-tab {
        opacity: 0;
        pointer-events: none;
    }
}

@media (min-width:821px) and (max-width:1250px){
    .dashboard-page {
        --da-sidebar-width: 235px;
    }
}

@media (max-width:820px){
    .dashboard-page .sidebar-reveal-tab {
        display: none!important;
    }
}

/* Container-responsive admin grids react to the actual content width, including sidebar state. */
@container daAdminMain (max-width:1180px){
    .metric-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))!important;
    }

    .overview-main-grid,
    .profit-view-grid,
    .customers-layout {
        grid-template-columns: 1fr!important;
    }

    .overview-lower-grid {
        grid-template-columns: 1fr 1fr!important;
    }

    .overview-right-stack {
        grid-column: 1/-1!important;
        grid-template-columns: 1fr 1fr!important;
        grid-template-rows: none!important;
    }

    .production-board {
        grid-template-columns: repeat(2,minmax(220px,1fr))!important;
    }

    .design-admin-grid,
    .inventory-grid,
    .coupon-admin-grid,
    .settings-grid {
        grid-template-columns: repeat(2,minmax(220px,1fr))!important;
    }
}

@container daAdminMain (max-width:760px){
    .metric-grid,
    .overview-lower-grid,
    .overview-right-stack,
    .production-board,
    .design-admin-grid,
    .inventory-grid,
    .coupon-admin-grid,
    .settings-grid {
        grid-template-columns: 1fr!important;
    }

    .profit-mini-grid {
        grid-template-columns: 1fr!important;
    }

    .shipping-row {
        grid-template-columns: 1fr!important;
    }
}

/* =========================================================
   PACKAGE 20 — DA Outlet Crew directory
   First three slots are permanent. The + tile can create additional members.
   Member data stays local until Supabase persistence is connected in Phase 2.
   ========================================================= */
.dashboard-page .crew-photo-manager {
    grid-template-columns: repeat(4,minmax(0,1fr));
    align-items: start;
}

.dashboard-page .crew-photo-slot,
.dashboard-page .crew-photo-add {
    overflow: visible;
}

.dashboard-page .crew-photo-slot {
    isolation: isolate;
}

.dashboard-page .crew-photo-slot .crew-photo-image,
.dashboard-page .crew-photo-slot .crew-silhouette {
    border-radius: 50%;
    overflow: hidden;
}

.dashboard-page .crew-photo-slot .crew-photo-image {
    z-index: 1;
}

.dashboard-page .crew-photo-slot .crew-silhouette {
    z-index: 0;
}

.dashboard-page .crew-role-chip {
    position: absolute;
    left: 50%;
    bottom: -5px;
    z-index: 4;
    max-width: 92%;
    transform: translateX(-50%);
    padding: 2px 5px;
    border: 1px solid rgba(228,195,124,.52);
    border-radius: 999px;
    background: rgba(4,15,27,.84);
    color: #fff0c7!important;
    font-size: 6px!important;
    font-weight: 900;
    letter-spacing: .035em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.dashboard-page .crew-photo-slot.has-member {
    border-color: rgba(101,207,255,.72)!important;
}

.dashboard-page .crew-photo-add {
    border-radius: 10px!important;
    aspect-ratio: 1/1;
}

.dashboard-page .crew-photo-add:disabled {
    opacity: 1!important;
    cursor: pointer!important;
}

.crew-editor-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(1,6,13,.62);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.crew-editor-backdrop[hidden] {
    display: none!important;
}

.crew-editor-dialog {
    width: min(620px,96vw);
    max-height: min(760px,92vh);
    overflow: auto;
    border: 1px solid rgba(95,194,239,.46);
    border-radius: 14px;
    background: linear-gradient(145deg,rgba(7,22,39,.78),rgba(4,12,24,.72));
    box-shadow: 0 28px 90px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(24px) saturate(1.25);
    -webkit-backdrop-filter: blur(24px) saturate(1.25);
    padding: 18px;
    color: #eff9ff;
}

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

.crew-editor-head>div {
    display: grid;
    gap: 4px;
}

.crew-editor-head strong {
    font-size: 16px;
    letter-spacing: .06em;
}

.crew-editor-head span {
    font-size: 9px;
    color: #9fb9ca;
}

.crew-editor-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(100,194,238,.30);
    border-radius: 8px;
    background: rgba(5,20,34,.52);
    color: #eaf7ff;
    cursor: pointer;
}

.crew-editor-photo-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid rgba(89,183,230,.20);
    border-radius: 10px;
    background: rgba(6,20,34,.24);
}

.crew-editor-photo {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(101,205,251,.55);
    display: grid;
    place-items: center;
    background: rgba(4,14,26,.56);
    color: #8aa2b7;
    font-size: 28px;
}

.crew-editor-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crew-editor-photo img[hidden] {
    display: none;
}

.crew-editor-photo span[hidden] {
    display: none;
}

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

.crew-editor-photo-actions button {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(98,196,242,.34);
    border-radius: 8px;
    background: rgba(8,34,55,.42);
    color: #e7f8ff;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.crew-editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.crew-editor-grid label,
.crew-editor-notes {
    display: grid;
    gap: 6px;
    color: #9cc0d4;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
}

.crew-editor-grid input,
.crew-editor-notes textarea {
    width: 100%;
    border: 1px solid rgba(85,174,222,.30);
    border-radius: 8px;
    background: rgba(3,15,27,.48);
    color: #f1fbff;
    padding: 10px 11px;
    outline: none;
}

.crew-editor-notes {
    margin-top: 11px;
}

.crew-editor-notes textarea {
    min-height: 90px;
    resize: vertical;
}

.crew-editor-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1.35fr;
    gap: 9px;
    margin-top: 15px;
}

.crew-editor-actions button {
    min-height: 42px;
    border: 1px solid rgba(94,189,236,.34);
    border-radius: 8px;
    background: rgba(8,33,54,.46);
    color: #eef9ff;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
}

.crew-editor-actions .crew-save {
    border-color: rgba(228,195,124,.58);
    background: linear-gradient(90deg,rgba(20,98,137,.42),rgba(92,70,26,.38));
    color: #fff4d2;
}

.crew-editor-actions .crew-delete {
    border-color: rgba(236,115,139,.38);
    color: #ffbecb;
}

@media (max-width:620px){
    .crew-editor-grid,
    .crew-editor-photo-row,
    .crew-editor-actions {
        grid-template-columns: 1fr;
    }

    .crew-editor-photo {
        margin: auto;
    }

    .crew-editor-photo-actions {
        justify-content: center;
    }
}

/* Dynamic/runtime dashboard cards use the same transparent glass even when they are not literal HTML nodes in Pinegrow. */
.dashboard-page :is(.dash-panel,.metric-card,.kanban-column,.design-admin-card,.inventory-card,.review-admin-card,.settings-card,.coupon-admin-card,.storefront-manager-panel,.order-details-panel,.production-actions-panel,.order-assets-panel,.production-transfer-panel,.full-panel,.outreach-glass,.outreach-thread-pane,.outreach-reply-pane) {
    background: linear-gradient(145deg,
      rgb(var(--pg-panel-rgb,7 22 39) / var(--pg-panel-alpha,.24)),
      rgb(var(--pg-panel-rgb-2,4 13 25) / var(--pg-panel-alpha-2,.14)));

    /* backdrop-filter: blur(var(--pg-panel-blur,18px)) saturate(var(--pg-panel-saturation,1.22))!important */
    -webkit-backdrop-filter: blur(var(--pg-panel-blur,18px)) saturate(var(--pg-panel-saturation,1.22))!important;
}

/* Package 20 generated dashboard navigation icons */
.admin-nav-btn>.admin-nav-icon {
    width: 34px;
    height: 34px;
    display: grid!important;
    place-items: center;
    overflow: visible;
    color: inherit!important;
    font-size: 0!important;
}

.admin-nav-btn>.admin-nav-icon img {
    width: 32px;
    height: 32px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(80,196,255,.26));
    transition: transform .18s ease,filter .18s ease;
}

.admin-nav-btn:hover>.admin-nav-icon img,
.admin-nav-btn.active>.admin-nav-icon img {
    transform: scale(1.08);
    filter: drop-shadow(0 0 8px rgba(89,211,255,.44)) drop-shadow(0 0 5px rgba(228,195,124,.26));
}

.admin-nav-btn {
    grid-template-columns: 36px 1fr auto!important;
    column-gap: 7px;
}

/* Package 20 true-notification badge guard */
#outreachNavBadge[hidden],
#outreachNavBadge:empty {
    display: none!important;
}

#outreachNavBadge:not(:empty) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   PACKAGE 20 — real topbar notifications + crew communications
   ========================================================= */
.dashboard-page .bell {
    width: 42px!important;
    height: 42px!important;
    display: grid!important;
    place-items: center!important;
    position: relative!important;
    border: 1px solid rgba(95,196,241,.22)!important;
    border-radius: 10px!important;
    background: rgba(5,20,35,.20)!important;
    backdrop-filter: blur(12px)!important;
    -webkit-backdrop-filter: blur(12px)!important;
}

.dashboard-page .bell:hover,
.dashboard-page .bell.has-notifications {
    border-color: rgba(228,195,124,.52)!important;
    background: rgba(9,31,50,.34)!important;
}

.dashboard-page .bell .bell-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 7px rgba(83,201,255,.24));
}

.dashboard-page .bell b#dashboardNotificationCount {
    position: absolute!important;
    right: -8px!important;
    top: -8px!important;
    min-width: 23px!important;
    width: auto!important;
    height: 23px!important;
    padding: 0 5px!important;
    box-sizing: border-box!important;
    border-radius: 999px!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    background: rgba(79,61,23,.96)!important;
    border: 1px solid rgba(241,205,116,.94)!important;
    color: #fff8df!important;
    font-size: 11px!important;
    font-weight: 950!important;
    line-height: 1!important;
    letter-spacing: 0!important;
    box-shadow: 0 0 11px rgba(228,195,124,.18)!important;
}

.dashboard-page .bell b#dashboardNotificationCount[hidden],
.dashboard-page .bell b#dashboardNotificationCount:empty {
    display: none!important;
}

.dashboard-notification-popover {
    position: fixed;
    z-index: 650;
    right: 72px;
    top: 66px;
    width: min(390px,calc(100vw - 24px));
    max-height: min(520px,78vh);
    overflow: hidden;
    border: 1px solid rgba(92,190,237,.42);
    border-radius: 14px;
    background: linear-gradient(145deg,rgba(6,22,38,.88),rgba(3,12,23,.84));
    box-shadow: 0 26px 80px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(26px) saturate(1.28);
    -webkit-backdrop-filter: blur(26px) saturate(1.28);
    color: #effaff;
}

.dashboard-notification-popover[hidden] {
    display: none!important;
}

.dashboard-notification-popover>header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 16px 12px;
    border-bottom: 1px solid rgba(83,174,222,.18);
}

.dashboard-notification-popover>header>div {
    display: grid;
    gap: 3px;
}

.dashboard-notification-popover>header strong {
    font-size: 13px;
    letter-spacing: .08em;
}

.dashboard-notification-popover>header span {
    font-size: 9px;
    color: #9eb8c9;
}

.dashboard-notification-popover>header button {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(93,189,236,.26);
    border-radius: 8px;
    background: rgba(7,25,42,.42);
    color: #eaf8ff;
    cursor: pointer;
}

.dashboard-notification-list {
    max-height: 430px;
    overflow: auto;
    padding: 9px;
}

.dashboard-notification-list>a {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 11px;
    border: 1px solid rgba(83,174,222,.16);
    border-radius: 10px;
    background: rgba(7,23,38,.26);
    text-decoration: none;
    color: #effaff;
    margin-bottom: 7px;
}

.dashboard-notification-list>a:hover {
    border-color: rgba(228,195,124,.42);
    background: rgba(16,40,58,.36);
}

.dashboard-notification-list>a>i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(89,196,244,.28);
    border-radius: 50%;
    font-style: normal;
    color: #96eaff;
    background: rgba(7,31,50,.42);
}

.dashboard-notification-list>a>div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.dashboard-notification-list>a strong {
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-notification-list>a span {
    font-size: 9px;
    color: #bcd3e0;
}

.dashboard-notification-list>a small {
    font-size: 8px;
    color: #7899ad;
}

.dashboard-notification-list>a>b {
    font-size: 8px;
    color: #f2deb0;
}

.dashboard-notification-empty {
    min-height: 160px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    text-align: center;
    padding: 20px;
}

.dashboard-notification-empty>span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(97,207,251,.28);
    color: #8ee8ff;
    background: rgba(5,27,44,.36);
}

.dashboard-notification-empty strong {
    font-size: 11px;
    letter-spacing: .08em;
}

.dashboard-notification-empty small {
    max-width: 270px;
    color: #8aa8bb;
    font-size: 9px;
    line-height: 1.5;
}

@media (max-width:620px){
    .dashboard-notification-popover {
        right: 12px;
        top: 62px;
    }
}

.crew-contact-deck,
.crew-video-section {
    margin-top: 13px;
    padding: 12px;
    border: 1px solid rgba(84,180,228,.22);
    border-radius: 11px;
    background: linear-gradient(145deg,rgba(5,20,34,.32),rgba(4,13,24,.20));
}

.crew-contact-title,
.crew-video-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.crew-contact-title>div,
.crew-video-head>div {
    display: grid;
    gap: 3px;
}

.crew-contact-title strong,
.crew-video-head strong {
    font-size: 10px;
    letter-spacing: .08em;
    color: #eaf9ff;
}

.crew-contact-title span,
.crew-video-head span {
    font-size: 8px;
    color: #94b2c4;
}

.crew-contact-actions,
.crew-video-actions {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
}

.crew-contact-actions button,
.crew-video-actions button {
    min-height: 38px;
    border: 1px solid rgba(91,188,235,.30);
    border-radius: 8px;
    background: rgba(8,31,51,.40);
    color: #edf9ff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .04em;
    cursor: pointer;
}

.crew-contact-actions button:hover,
.crew-video-actions button:hover {
    border-color: rgba(228,195,124,.54);
    color: #fff0c5;
}

.crew-contact-actions button:disabled,
.crew-video-actions button:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.crew-video-head b {
    padding: 4px 7px;
    border-radius: 999px;
    border: 1px solid rgba(91,194,241,.28);
    background: rgba(8,32,51,.36);
    color: #9be9ff;
    font-size: 7px;
    letter-spacing: .05em;
    white-space: nowrap;
}

.crew-video-screen {
    height: 265px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(87,185,233,.30);
    border-radius: 10px;
    background: radial-gradient(circle at 50% 42%,rgba(52,167,226,.12),transparent 36%),rgba(1,8,16,.58);
    margin-bottom: 10px;
}

.crew-video-screen iframe,
.crew-video-screen video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    background: #020812;
}

.crew-video-screen [hidden] {
    display: none!important;
}

.crew-video-idle {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    text-align: center;
    color: #dff6ff;
}

.crew-video-idle>span {
    font-size: 26px;
    color: #62d9ff;
    text-shadow: 0 0 18px rgba(72,203,255,.25);
}

.crew-video-idle>strong {
    font-size: 11px;
    letter-spacing: .11em;
}

.crew-video-idle>small {
    font-size: 8px;
    color: #8eacbd;
}

.crew-video-url {
    display: grid;
    gap: 6px;
    color: #9cc0d4;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    margin-bottom: 9px;
}

.crew-video-url input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(85,174,222,.30);
    border-radius: 8px;
    background: rgba(3,15,27,.48);
    color: #f1fbff;
    padding: 10px 11px;
    outline: none;
}

.crew-video-actions {
    grid-template-columns: repeat(5,minmax(0,1fr));
}

.crew-video-note {
    display: block;
    margin-top: 9px;
    color: #7f9dae;
    font-size: 8px;
    line-height: 1.45;
}

@media (max-width:720px){
    .crew-contact-actions {
        grid-template-columns: 1fr 1fr;
    }

    .crew-video-actions {
        grid-template-columns: 1fr 1fr;
    }

    .crew-video-screen {
        height: 220px;
    }
}

/* Crew video dialog gets a wider desktop workspace. */
@media (min-width:721px){
    .crew-editor-dialog {
        width: min(780px,96vw)!important;
    }
}

/* Phase 2 Package 2 — analytics + live visitors */
.command-intel-grid {
    display: grid;
    grid-template-columns: 1.08fr 1.22fr;
    gap: 18px;
    margin: 18px 0 22px;
    align-items: stretch;
}

.ai-usage-head-actions,
.visitor-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.outline-action.tiny {
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: .08em;
}

.mini-live-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(97,202,255,.28);
    background: rgba(9,31,57,.54);
    color: #dff8ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.visitor-refresh-note {
    color: rgba(223,248,255,.72);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ai-usage-mini-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin-top: 10px;
}

.ai-stat-card {
    padding: 14px 14px 12px;
    border-radius: 18px;
    border: 1px solid rgba(93,196,245,.2);
    background: linear-gradient(180deg,rgba(7,30,55,.62),rgba(2,13,26,.54));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.ai-stat-card span,
.visitor-mini-stats span {
    display: block;
    color: rgba(223,248,255,.66);
    font-size: 10px;
    letter-spacing: .14em;
    font-weight: 800;
    text-transform: uppercase;
}

.ai-stat-card strong,
.visitor-mini-stats strong {
    display: block;
    color: #fff;
    font-size: 24px;
    line-height: 1.1;
    margin-top: 8px;
}

.ai-stat-card small {
    display: block;
    color: rgba(223,248,255,.76);
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
}

.ai-stat-card.accent {
    border-color: rgba(159,118,255,.34);
    background: linear-gradient(180deg,rgba(35,16,68,.6),rgba(5,16,31,.58));
}

.ai-usage-breakdown {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    margin-top: 14px;
}

.ai-usage-line {
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(93,196,245,.18);
    background: rgba(4,16,31,.46);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ai-usage-line strong {
    font-size: 13px;
    color: #effaff;
}

.ai-usage-line span {
    font-size: 11px;
    color: rgba(223,248,255,.68);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ai-usage-line b {
    font-size: 14px;
    color: #8fe8ff;
}

.panel-footnote {
    margin: 12px 2px 0;
    color: rgba(223,248,255,.7);
    font-size: 12px;
    line-height: 1.45;
}

.visitor-mini-stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin-top: 10px;
}

.visitor-mini-stats>div {
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid rgba(93,196,245,.18);
    background: rgba(4,16,31,.44);
}

.visitor-table-wrap {
    margin-top: 14px;
    max-height: 360px;
    overflow: auto;
    border: 1px solid rgba(93,196,245,.16);
    border-radius: 18px;
    background: rgba(2,12,23,.42);
}

.visitor-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.visitor-table thead th {
    position: sticky;
    top: 0;
    background: rgba(5,17,32,.94);
    backdrop-filter: blur(10px);
    z-index: 1;
    color: #d6f7ff;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 12px 12px;
    border-bottom: 1px solid rgba(93,196,245,.16);
    text-align: left;
}

.visitor-table tbody td {
    padding: 12px;
    border-bottom: 1px solid rgba(93,196,245,.08);
    color: #f5fdff;
    font-size: 13px;
    vertical-align: middle;
}

.visitor-table tbody tr:last-child td {
    border-bottom: none;
}

.visitor-table .visit-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    border: 1px solid rgba(93,196,245,.2);
    background: rgba(8,33,61,.6);
    color: #dff7ff;
}

.visitor-table .visit-type.repeat {
    border-color: rgba(160,121,255,.34);
    background: rgba(48,19,74,.52);
    color: #f4ecff;
}

.visitor-table .activity-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    background: #2ff2a3;
    box-shadow: 0 0 10px rgba(47,242,163,.65);
}

.visitor-table .activity-dot.idle {
    background: #7f98a8;
    box-shadow: none;
}

.visitor-table .muted {
    color: rgba(223,248,255,.72);
}

@media (max-width:1300px){
    .command-intel-grid {
        grid-template-columns: 1fr;
    }

    .ai-usage-mini-grid,
    .visitor-mini-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:820px){
    .ai-usage-mini-grid,
    .visitor-mini-stats,
    .ai-usage-breakdown {
        grid-template-columns: 1fr;
    }

    .visitor-table {
        min-width: 660px;
    }
}

/* Phase 3-6 — Command Center production layout */
.admin-view[data-view="overview"].active {
    display: grid;
    grid-template-columns: repeat(12,minmax(0,1fr));
    gap: 14px;
    align-items: stretch;
}

.admin-view[data-view="overview"] > .metric-grid {
    grid-column: 1 / -1;
    grid-row: 1;
}

.admin-view[data-view="overview"] > .command-intel-grid,
.admin-view[data-view="overview"] > .overview-main-grid,
.admin-view[data-view="overview"] > .overview-lower-grid,
.admin-view[data-view="overview"] .overview-right-stack {
    display: contents;
}

.admin-view[data-view="overview"] .profit-overview-panel {
    grid-column: 1 / -1;
    grid-row: 2;
}

.admin-view[data-view="overview"] .recent-orders-panel {
    grid-column: 1 / 8;
    grid-row: 3;
}

.admin-view[data-view="overview"] .order-details-panel {
    grid-column: 8 / -1;
    grid-row: 3;
}

.admin-view[data-view="overview"] .design-preview-panel {
    grid-column: 1 / 5;
    grid-row: 4;
}

.admin-view[data-view="overview"] .production-actions-panel {
    grid-column: 5 / 9;
    grid-row: 4;
}

.admin-view[data-view="overview"] .activity-panel {
    grid-column: 9 / -1;
    grid-row: 4;
}

.admin-view[data-view="overview"] .ai-usage-panel {
    grid-column: 1 / 7;
    grid-row: 5;
}

.admin-view[data-view="overview"] .live-visitors-panel {
    grid-column: 7 / -1;
    grid-row: 5;
}

.admin-view[data-view="overview"] .profit-mini-grid {
    grid-template-columns: minmax(300px,380px) minmax(0,1fr);
    min-height: 210px;
    align-items: center;
}

.admin-view[data-view="overview"] .profit-chart svg {
    height: 185px;
}

@media (max-width: 1350px) {
    .admin-view[data-view="overview"] .recent-orders-panel,
    .admin-view[data-view="overview"] .order-details-panel,
    .admin-view[data-view="overview"] .activity-panel,
    .admin-view[data-view="overview"] .ai-usage-panel,
    .admin-view[data-view="overview"] .live-visitors-panel {
        grid-column: 1 / -1;
    }
    .admin-view[data-view="overview"] .recent-orders-panel { grid-row: 3; }
    .admin-view[data-view="overview"] .order-details-panel { grid-row: 4; }
    .admin-view[data-view="overview"] .design-preview-panel { grid-column: 1 / 7; grid-row: 5; }
    .admin-view[data-view="overview"] .production-actions-panel { grid-column: 7 / -1; grid-row: 5; }
    .admin-view[data-view="overview"] .activity-panel { grid-row: 6; }
    .admin-view[data-view="overview"] .ai-usage-panel { grid-row: 7; }
    .admin-view[data-view="overview"] .live-visitors-panel { grid-row: 8; }
}

@media (max-width: 820px) {
    .admin-view[data-view="overview"].active {
        grid-template-columns: 1fr;
    }
    .admin-view[data-view="overview"] > .metric-grid,
    .admin-view[data-view="overview"] .profit-overview-panel,
    .admin-view[data-view="overview"] .recent-orders-panel,
    .admin-view[data-view="overview"] .order-details-panel,
    .admin-view[data-view="overview"] .design-preview-panel,
    .admin-view[data-view="overview"] .production-actions-panel,
    .admin-view[data-view="overview"] .activity-panel,
    .admin-view[data-view="overview"] .ai-usage-panel,
    .admin-view[data-view="overview"] .live-visitors-panel {
        grid-column: 1;
    }
    .admin-view[data-view="overview"] > .metric-grid { grid-row: 1; }
    .admin-view[data-view="overview"] .profit-overview-panel { grid-row: 2; }
    .admin-view[data-view="overview"] .recent-orders-panel { grid-row: 3; }
    .admin-view[data-view="overview"] .order-details-panel { grid-row: 4; }
    .admin-view[data-view="overview"] .design-preview-panel { grid-row: 5; }
    .admin-view[data-view="overview"] .production-actions-panel { grid-row: 6; }
    .admin-view[data-view="overview"] .activity-panel { grid-row: 7; }
    .admin-view[data-view="overview"] .ai-usage-panel { grid-row: 8; }
    .admin-view[data-view="overview"] .live-visitors-panel { grid-row: 9; }
    .admin-view[data-view="overview"] .profit-mini-grid {
        grid-template-columns: 1fr;
    }
}


/* Phase 3 - 7: compact destructive action for Recent Orders. */
.order-id-cell {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.order-delete-btn {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,88,122,.62);
    border-radius: 5px;
    background: rgba(91,8,28,.34);
    color: #ff8da7;
    font: 900 15px/1 Arial,sans-serif;
    cursor: pointer;
    box-shadow: inset 0 0 10px rgba(255,70,111,.05);
}
.order-delete-btn:hover {
    border-color: #ff6e91;
    background: rgba(145,12,48,.48);
    color: #fff;
}
.order-delete-btn:disabled {
    opacity: .5;
    cursor: wait;
}

/* Phase 4 - 2 · selected-order Outbound handoff */
.order-assets-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.order-assets-head-actions>strong {
    font-size: 12px;
    color: #dff8ff;
    border: 1px solid rgba(110,218,255,.25);
    border-radius: 7px;
    padding: 8px 10px;
    background: rgba(48,164,207,.08);
}

.order-send-outbound {
    min-height: 34px;
    white-space: nowrap;
}

@media (max-width: 780px) {
    .order-assets-head-actions {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}


/* Phase 4 - 3 revision: custom Outbound work in the Overview operational feed. */
.overview-source-badge {
    display: block;
    width: max-content;
    margin-top: 5px;
    padding: 2px 6px;
    border: 1px solid rgba(35,235,244,.46);
    border-radius: 4px;
    background: rgba(8,29,56,.55);
    color: #23ebf4;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .12em;
    line-height: 1.2;
}


/* Phase 7-1 · authenticated security readiness */
.admin-security-status{display:grid;gap:8px;margin:12px 0 14px}.admin-security-status>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 11px;border:1px solid rgba(91,190,240,.24);border-radius:6px;background:rgba(4,16,30,.42)}.admin-security-status span{font-size:10px;letter-spacing:.09em;color:#9cb4c8}.admin-security-status b{font-size:10px;letter-spacing:.08em;color:#c6d5e1}.admin-security-status b.security-ok{color:#67e2b2}.admin-security-status b.security-warn{color:#f2cc84}