.actl__tabs {
    display: flex;
    gap: .45rem;
    margin: 0 1.2rem 1rem;
    padding: .35rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #eef4f8;
}

.actl__tab {
    flex: 1;
    min-height: 2.7rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .09em;
    cursor: pointer;
}

.actl__tab.is-active {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 4px 12px rgba(8, 26, 49, .18);
}

[data-actl-tab-panel][hidden] { display: none !important; }

.actl__hlc {
    margin: 0 1.2rem 1.2rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f7fafc;
}

.actl__hlc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: var(--navy);
    color: #fff;
}

.actl__hlc-header h3 {
    margin: .12rem 0 .35rem;
    color: #fff;
    font-size: 1.35rem;
}

.actl__hlc-header p:not(.actl__eyebrow) {
    max-width: 760px;
    margin: 0;
    color: #c9d8e7;
    font-size: .76rem;
}

.actl__hlc-state {
    flex: 0 0 auto;
    padding: .42rem .65rem;
    border: 1px solid #5bd0ed;
    border-radius: 999px;
    background: #0f3856;
    color: #8ee8ff;
    font-size: .68rem;
    font-weight: 800;
}

.actl__hlc-state.is-created {
    border-color: #76d39c;
    background: #194e34;
    color: #a7f0c4;
}

.actl__hlc-state.is-warning {
    border-color: #ffb17a;
    background: #5b3116;
    color: #ffd8bc;
}

.actl__hlc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
    gap: 1rem;
    padding: 1rem;
}

.actl__hlc-visuals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    min-width: 0;
}

.actl__hlc-visuals article { min-width: 0; }

.actl__hlc-visuals h4,
.actl__hlc-mapping h4 {
    margin: .1rem 0 .55rem;
    font-size: .76rem;
    letter-spacing: .06em;
}

.actl__hlc-stage {
    position: relative;
    overflow: hidden;
    border: 1px solid #becbd8;
    border-radius: 12px;
    background: #091726;
    cursor: crosshair;
    touch-action: none;
}

.actl__hlc-stage canvas {
    display: block;
    width: 100%;
    height: auto;
}

.actl__hlc-stage .actl__hlc-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.actl__hlc-stage .actl__hlc-mask[hidden] { display: none; }

.actl__hlc-roi {
    position: absolute;
    z-index: 2;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--orange), 0 2px 10px rgba(0, 0, 0, .28);
    background: rgba(232, 119, 22, .1);
    pointer-events: none;
}

.actl__hlc-controls {
    display: grid;
    align-content: start;
    gap: .75rem;
    min-width: 0;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.actl__hlc-control {
    display: grid;
    gap: .35rem;
}

.actl__hlc-control label {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.actl__hlc-control select {
    width: 100%;
    padding: .55rem .6rem;
    border: 1px solid #b9c7d5;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: .78rem;
}

.actl__hlc-control p {
    margin: 0;
    color: var(--muted);
    font-size: .69rem;
    line-height: 1.4;
}

.actl__hlc-family {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: .65rem;
    border: 1px solid #b9c7d5;
    border-radius: 9px;
    background: #f4f8fb;
}

.actl__hlc-family[hidden] { display: none; }

.actl__hlc-family legend {
    padding: 0 .25rem;
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.actl__hlc-family p,
.actl__hlc-family small {
    margin: 0;
    color: var(--muted);
    font-size: .66rem;
    line-height: 1.35;
}

.actl__hlc-family > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem;
}

.actl__hlc-family label {
    display: grid;
    gap: .2rem;
    color: var(--ink);
    font-size: .68rem;
    font-weight: 800;
}

.actl__hlc-family input {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: .3rem;
    border: 1px solid #aebdcc;
    border-radius: 7px;
    background: #fff;
    text-align: center;
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.actl__hlc-deltas {
    display: grid;
    gap: .45rem;
}

.actl__hlc-channel {
    display: grid;
    grid-template-columns: 36px 34px minmax(70px, 1fr) 34px;
    align-items: center;
    gap: .35rem;
}

.actl__hlc-channel span {
    font-size: .76rem;
    font-weight: 850;
}

.actl__hlc-channel button {
    height: 34px;
    border: 1px solid #aebdcc;
    border-radius: 7px;
    background: #edf4f8;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}

.actl__hlc-channel input {
    min-width: 0;
    height: 34px;
    padding: .35rem .45rem;
    border: 1px solid #aebdcc;
    border-radius: 7px;
    text-align: center;
    font: inherit;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.actl__hlc-policy {
    display: grid;
    gap: .18rem;
    padding: .6rem .7rem;
    border-left: 4px solid #238c50;
    border-radius: 7px;
    background: #e8f7ed;
}

.actl__hlc-policy strong { font-size: .74rem; }
.actl__hlc-policy span { color: #376349; font-size: .66rem; }

.actl__hlc-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
}

.actl__hlc-stats > div {
    padding: .52rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

.actl__hlc-stats span {
    display: block;
    color: var(--muted);
    font-size: .61rem;
    font-weight: 800;
    text-transform: uppercase;
}

.actl__hlc-stats strong {
    display: block;
    margin-top: .12rem;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

.actl__hlc-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
}

.actl__hlc-actions .actl__button {
    width: 100%;
    min-width: 0;
}

.actl__hlc-actions .actl__button.is-active {
    border-color: #1787a8;
    background: #e5f8fc;
    color: #075f78 !important;
    box-shadow: inset 0 0 0 1px #55c9e6;
}

.actl__button:disabled { opacity: .45; cursor: not-allowed; }

.actl__hlc-mapping {
    display: grid;
    gap: .65rem;
    padding: 0 1rem 1rem;
}

.actl__hlc-mapping p {
    margin: 0;
    color: var(--muted);
    font-size: .72rem;
}

.actl__hlc-table-wrap {
    overflow: auto;
    max-height: 340px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.actl__hlc-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
}

.actl__hlc-table-wrap th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .55rem;
    background: #eaf1f6;
    color: #496078;
    text-align: left;
    font-size: .62rem;
    text-transform: uppercase;
}

.actl__hlc-table-wrap td {
    padding: .48rem .55rem;
    border-top: 1px solid var(--line);
    white-space: nowrap;
}

.actl__hlc-table-wrap tr.is-changed td { background: #f1fbf5; }
.actl__hlc-table-wrap tr.is-unresolved td { background: #fff4ed; color: #8c3b14; }

@media (max-width: 1050px) {
    .actl__hlc-layout { grid-template-columns: 1fr; }
    .actl__hlc-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .actl__hlc-actions,
    .actl__hlc-policy { align-self: stretch; }
}

@media (max-width: 720px) {
    .actl__hlc-header { flex-direction: column; }
    .actl__hlc-visuals,
    .actl__hlc-controls { grid-template-columns: 1fr; }
    .actl__hlc-layout { padding: .7rem; }
    .actl__hlc,
    .actl__tabs { margin-left: .7rem; margin-right: .7rem; }
}