:root {
    font: 14px/1.5 system-ui, -apple-system, Segoe UI, sans-serif;
    color: #262626;
    background: #f8f9fb;
    --bg: #f8f9fb;
    --panel: #fff;
    --fg: #262626;
    --muted: #888;
    --border: #ececec;
    --accent: #242424;
    --btn: #fff;
    --input: #fff;
    --aside-width: 300px
}

:root.dark {
    color-scheme: dark;
    --bg: #12141a;
    --panel: #1d212a;
    --fg: #f3f4f6;
    --muted: #a1a1aa;
    --border: #343b48;
    --accent: #1ccabb;
    --btn: #242a35;
    --input: #171b23
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
      font-family: "Bricolage Grotesque", sans-serif;
  font-optical-sizing: auto;
}

.action-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    z-index: 9999;
    background: #16a34a;
    color: #fff;
    overflow: hidden
}

.action-progress[hidden] {
    display: none
}

.action-progress-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #16a34a, #4ade80, #16a34a);
    background-size: 200% 100%;
    animation: action-progress-shift 1.2s linear infinite
}

.action-progress.done .action-progress-fill {
    animation: none;
    background: #16a34a
}

.action-progress.error .action-progress-fill {
    animation: none;
    background: #dc2626
}

#action-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px #0008
}

@keyframes action-progress-shift {
    from { background-position: 200% 0 }
    to { background-position: 0 0 }
}

.shell {
    display: flex;
    min-height: 100vh
}

aside {
    background: var(--panel);
    width: var(--aside-width);
    flex: none;
    border-right: 1px solid var(--border);
    padding: 25px 15px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 0;
    height: 100vh;
    min-width: 220px;
    max-width: 520px;
    overflow: hidden
}

.brand {
    font-size: 22px;
    font-weight: 750;
    letter-spacing: .025em
}

.brand small {
    display: block;
    font-size: 10px;
    letter-spacing: .19em;
    color: var(--muted);
    font-weight: 600;
    margin-left: 26px
}

.brand:first-letter {
    color: #13c7b7
}

nav {
    display: grid;
    gap: 7px
}

nav a {
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--fg)
}

nav a:hover {
    background: var(--bg)
}

nav a.active {
    background: var(--bg);
    font-weight: 650
}

.side-panel {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1
}

.side-panel .hrow {
    align-items: center
}

.side-foot {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 12px
}

#aside-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    cursor: ew-resize;
    background: linear-gradient(90deg, transparent, #00000012)
}

main {
     flex: 1;
    min-width: 0;
    /* max-width: 1450px; */
    padding: 0px 15px;
    /* margin: auto */
}

header,
.hrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px
}

header {
    margin-bottom: 22px
}

#overview {
    display: grid;
    gap: 6px
}

.overview-tabs {
    display: inline-flex;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--panel);
    width: fit-content;
    max-width: 100%
}

.overview-tab {
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    padding: 8px 14px;
    font-weight: 650
}

.overview-tab.active {
    background: var(--bg);
    border-color: var(--border)
}

.overview-panel[hidden] {
    display: none !important
}

.eyebrow {
    color: #1baea6;
    font-size: 10px;
    letter-spacing: .17em;
    font-weight: 750
}

h1 {
    font-size: 32px;
    margin: 0;
    letter-spacing: -1px
}

h2 {
    font-size: 17px;
    margin: 0 0 13px;
    letter-spacing: -.25px
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.chip {
display: inline-block;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px 8px;
    background: var(--panel);
    font-size: 12px;
}

#server-status {
    display: inline-flex;
    align-items: center;
    /* border: 1px solid var(--border); */
    border-radius: 12px;
    padding: 4px 13px;
    background: var(--panel);
    color: var(--fg);
    font-weight: 700;
    font-size: 12px;
}

#server-status.online {
    background: #16a34a;
    color: #fde047;
    border-color: transparent
}

#server-status.offline {
    background: #dc2626;
    color: #fff;
    border-color: transparent
}

.badge {
    display: inline-block;
    min-width: 18px;
    text-align: center;
    border-radius: 9px;
    background: var(--accent);
    color: var(--bg);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px
}

.metrics {
 display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 9px 0;
}

.metric,
.panel {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--panel);
    box-shadow: 0 8px 25px #11100004
}

.metric {
    padding: 22px
}

.metric span {
    display: block;
    font-size: 12px;
    color: var(--muted)
}

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

.panel {
    padding: 22px;
    margin-bottom: 18px
}

#overview>.overview-panel>.panel {
    margin-bottom: 0
}

.rules-cols {
    align-items: start
}

.rules-switch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg);
    padding: 12px 14px;
    margin: 0 0 16px
}

.rules-switch-text {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1
}

.rules-switch-text strong {
    font-size: 13px
}

.rules-switch-text small {
    color: var(--muted);
    font-size: 11px
}

.switch {
    position: relative;
    display: inline-flex;
    flex: none;
    cursor: pointer
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer
}

.switch-track {
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--border);
    transition: background .16s ease;
    display: block
}

.switch-thumb {
    display: block;
    width: 18px;
    height: 18px;
    margin: 3px;
    border-radius: 50%;
    background: var(--panel);
    box-shadow: 0 1px 3px #0003;
    transition: transform .16s ease
}

.switch input:checked+.switch-track {
    background: #16a34a
}

.switch input:checked+.switch-track .switch-thumb {
    transform: translateX(18px)
}

.switch input:focus-visible+.switch-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px
}

.badge.off {
    background: var(--muted)
}

.function-cols {
    align-items: start
}

.rules-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--bg);
    padding: 16px;
    min-width: 0
}

.rules-card h3 {
    margin: 0;
    font-size: 15px
}

.rules-form {
    display: flex;
    gap: 8px;
    margin: 12px 0 14px
}

.rules-form input {
    flex: 1;
    min-width: 0
}

.rules-list {
    display: grid;
    gap: 8px
}

.rule-item {
    display: flex;
    align-items: stretch;
    gap: 8px
}

.rule-item-text {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--panel);
    font-size: 12px;
    font-weight: 600;
    overflow-wrap: anywhere
}

.rule-item-remove {
    width: 40px;
    flex: none;
    padding: 0;
    font-size: 18px
}

.rules-empty {
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 14px;
    color: var(--muted);
    font-size: 12px;
    background: var(--panel)
}

input,
textarea,
select {
    font: inherit;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--input);
    color: var(--fg);
    outline-color: #10bfb2;
    width: 100%
}

textarea {
    resize: vertical;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px
}

label {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin: 12px 0 6px
}

.check {
    display: flex;
    align-items: center;
    gap: 7px
}

.inline-check {
    margin: 0;
    font-size: 12px;
    white-space: nowrap
}

.check input {
    width: auto
}

button {
    font: inherit;
    border: 1px solid var(--border);
    border-radius: 6px;
        padding: 2px 8px;
    background: var(--btn);
    /* color: var(--fg); */
    cursor: pointer;
        font-size: 12px;
}

button:hover {
    opacity: .8
}

.primary {
    background: var(--accent);
    color: var(--bg);
    font-weight: 650;
    border-color: transparent
}

.hint {
    color: var(--muted);
    font-size: 12px
}

.table-scroll {
    overflow: auto
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
    text-align: left;
    font-size: 12px
}

td,
th {
    padding: 12px 9px;
    border-bottom: 1px solid var(--border);
    vertical-align: top
}

th {
    color: var(--muted);
    font-weight: 500
}

td small {
    display: block;
    color: var(--muted)
}

.domain-cell {
    display: flex;
    align-items: flex-start;
    gap: 10px
}

.domain-text {
    min-width: 0;
    flex: 1
}

.socket-favicon {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    object-fit: contain;
    flex: none;
    margin-top: 1px;
    background: var(--panel)
}

.socket-title {
    color: var(--fg);
    opacity: .82;
    font-weight: 500
}

.cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.cols .panel {
    min-width: 0
}

pre {
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bg);
    padding: 14px;
    border-radius: 12px;
    max-height: 270px;
    overflow: auto;
    font: 11px/1.6 ui-monospace, Consolas, monospace
}

.simrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    padding: 10px 0;
    gap: 10px;
    flex-wrap: wrap
}

.simrow small {
    color: var(--muted)
}

#auth .hrow input {
    flex: 1
}

input[type="checkbox"] {
    width: auto;
    padding: 0
}

.hrow.filters {
    margin: 12px 0;
    align-items: center
}

.search-field {
    position: relative;
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center
}

.search-field input {
    padding-right: 68px
}

.search-field button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--muted);
    display: grid;
    place-items: center
}

.search-field button:hover {
    color: var(--fg);
    opacity: 1
}

.search-field button:disabled {
    opacity: .35;
    cursor: not-allowed
}

.search-field #search-clear {
    right: 34px
}

.search-field #search-mic {
    right: 4px
}

.search-field button svg {
    width: 15px;
    height: 15px
}

mark {
    background: #fde68a;
    color: inherit;
    border-radius: 3px;
    padding: 0 1px
}

:root.dark mark {
    background: #b45309;
    color: #fff
}

.side-foot .panel {
    padding: 14px;
    margin: 0;
    box-shadow: none;
    text-align: left
}

.side-foot .panel h2 {
    font-size: 13px;
    margin: 0
}

.side-foot .panel .hint {
    margin: 6px 0 10px;
    line-height: 1.35
}

.side-foot .panel input,
.side-foot .panel button {
    width: 100%
}

.side-foot .panel button {
    margin-top: 8px
}

.picker {
    position: relative;
    flex: none
}

.menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 240px;
    max-height: 260px;
    overflow: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 18px 40px #1112
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 8px;
    border-radius: 9px;
    color: var(--fg);
    font-size: 12px;
    cursor: pointer
}

.menu-item:hover {
    background: var(--bg)
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px
}

.domain-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 20px;
    padding: 5px 6px 5px 12px;
    font-size: 12px
}

.domain-chip .trash {
    border: none;
    background: transparent;
    color: var(--muted);
    line-height: 0;
    padding: 4px;
    border-radius: 8px
}

.domain-chip .trash:hover {
    color: #dc2626;
    background: var(--bg);
    opacity: 1
}

.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.row-actions button {
    padding: 6px 9px;
    border-radius: 9px;
    font-size: 11px
}

th[data-sort] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap
}

th[data-sort]:hover,
th.sorted {
    color: var(--fg)
}

.sort-ind {
    margin-left: 5px;
    font-size: 9px
}

.col-check {
    width: 34px
}

.pager {
    margin-top: 14px
}

.toolbar select {
    width: auto
}

label.inline {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12px
}

.summary-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    font: 700 11px/1 ui-monospace, Consolas, monospace
}

.tag {
    padding: 1px 5px;
    border-radius: 6px;
    color: #fff;
    font-weight: 700
}

.tag.ok {
    background: #16a34a
}

.tag.zero {
    background: #dc2626
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
    background: #0b0d1255
}

.modal-backdrop[hidden] {
    display: none
}

.modal-card {
    width: 100%;
    max-width: 420px;
    background: var(--panel);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 25px 60px #1113
}

.modal-card-wide {
    max-width: 920px
}

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

.modal-head h3 {
    margin: 0
}

#modal-close {
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 20px
}

.modal-card h3 {
    margin: 0 0 10px;
    font-size: 17px
}

.modal-card p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 13px
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

#direct[hidden] {
    display: none !important
}

#direct {
    margin: 0 0 14px
}

.events-grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%
}

.events-head,
.event-row {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 10px
}

.events-head {
    padding: 0 0 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--border)
}

.events-body {
    min-height: 0;
    overflow: auto;
    display: grid;
    gap: 10px;
    padding-top: 10px
}

.event-row {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    background: var(--bg)
}

.event-cell {
    min-width: 0;
    display: grid;
    gap: 6px
}

.event-time {
    font-size: 11px;
    color: var(--muted);
    font-family: ui-monospace, Consolas, monospace
}

.event-kind,
.event-msgtype,
.event-note {
    font-size: 12px;
    font-weight: 600
}

.event-note {
    font-weight: 500;
    color: var(--muted)
}

.event-targets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.mini-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    max-width: 100%;
    max-height: min-content;
    overflow-wrap: anywhere
}

.mini-badge.matched {
    background: var(--accent);
    color: var(--bg);
    border-color: transparent;
    max-height: min-content;
}

.function-source {
    display: grid;
    gap: 8px;
    margin: 12px 0 14px
}

.function-source textarea {
    width: 100%;
    min-height: 96px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    color: var(--fg);
    padding: 10px 12px;
    font: 12px/1.5 "Chivo Mono", monospace;
    resize: vertical
}

.function-source input[type="file"] {
    font-size: 12px
}

.mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px
}

.mini-table th,
.mini-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    overflow-wrap: anywhere
}

.mini-table th {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em
}

.mini-table tbody tr:last-child td {
    border-bottom: 0
}

.shortcut-table kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: inset 0 -1px 0 #0001;
    font: 600 12px/1 "Inter Tight", system-ui, sans-serif
}

.kbd-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    color: var(--muted);
    font-weight: 700
}

.layout-grid,
.layout-preview-grid {
    align-items: start
}

.layout-form {
    display: grid;
    gap: 12px
}

.layout-field {
    display: grid;
    gap: 6px
}

.layout-check {
    margin: 2px 0
}

.layout-position-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px
}

.layout-pos-btn.active {
    background: var(--accent);
    color: var(--bg);
    border-color: transparent
}

.layout-side-by-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.layout-stage-card {
    display: grid;
    gap: 10px
}

.layout-stage-head {
    display: flex;
    justify-content: flex-start
}

.layout-stage {
    position: relative;
    min-height: 320px;
    border: 1px dashed var(--border);
    border-radius: 18px;
    background:
        linear-gradient(0deg, transparent 24%, #00000005 25%, #00000005 26%, transparent 27%, transparent 74%, #00000005 75%, #00000005 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, #00000005 25%, #00000005 26%, transparent 27%, transparent 74%, #00000005 75%, #00000005 76%, transparent 77%, transparent),
        var(--bg);
    background-size: 40px 40px;
    overflow: hidden
}

.layout-preview-widget {
    position: absolute;
    width: 0;
    height: 0;
    transition: all .2s ease
}

.layout-preview-widget[data-position="top-left"] {
    top: 14px;
    left: 14px
}

.layout-preview-widget[data-position="top-center"] {
    top: 14px;
    left: 50%;
    transform: translateX(-50%)
}

.layout-preview-widget[data-position="top-right"] {
    top: 14px;
    right: 14px
}

.layout-preview-widget[data-position="right-center"] {
    top: 50%;
    right: 14px;
    transform: translateY(-50%)
}

.layout-preview-widget[data-position="bottom-right"] {
    right: 14px;
    bottom: 14px
}

.layout-preview-widget[data-position="bottom-center"] {
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%)
}

.layout-preview-widget[data-position="bottom-left"] {
    left: 14px;
    bottom: 14px
}

.layout-preview-widget[data-position="left-center"] {
    top: 50%;
    left: 14px;
    transform: translateY(-50%)
}

.layout-preview-card {
    width: 240px;
    border-radius: 24px;
    background: #fff;
    color: #202020;
    border: 1px solid #e6e6e6;
    box-shadow: 0 16px 40px #1112;
    padding: 14px;
    transition: all .2s ease
}

.layout-preview-widget.dark .layout-preview-card {
    background: #252525;
    color: #f7f7f7;
    border-color: #444
}

.layout-preview-widget.min .layout-preview-card {
    width: 180px;
    border-radius: 18px;
    padding: 10px 12px
}

.layout-preview-header,
.layout-preview-line,
.layout-preview-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.layout-preview-header {
    margin-bottom: 10px
}

.layout-preview-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700
}

.layout-preview-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0ab9b0
}

.layout-preview-count {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: #13c7b71f
}

.layout-preview-tabs {
    margin-bottom: 12px
}

.layout-preview-tabs span {
    flex: 1;
    text-align: center;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 8px;
    background: #8881
}

.layout-preview-tabs .active {
    background: #242424;
    color: #fff
}

.layout-preview-widget.dark .layout-preview-tabs .active {
    background: #e7e7e7;
    color: #161616
}

.layout-preview-big {
    font-size: 28px;
    font-weight: 700;
    margin: 8px 0 4px
}

.layout-preview-big small,
.layout-preview-mini {
    color: var(--muted)
}

.layout-preview-widget.min .layout-preview-tabs,
.layout-preview-widget.min .layout-preview-body {
    display: none
}

@media(max-width:1100px) {
    .cols {
        grid-template-columns: 1fr
    }

    .metrics {
        grid-template-columns: repeat(2, 1fr)
    }

    .layout-side-by-side {
        grid-template-columns: 1fr
    }
}

@media(max-width:700px) {
    aside {
        width: 65px;
        padding: 15px 6px
    }

    .brand {
        font-size: 15px
    }

    .brand small,
    nav a,
    .side-foot,
    .side-panel {
        font-size: 0
    }

    .side-foot #auth {
        display: none
    }

    nav a::first-letter {
        font-size: 20px
    }

    main {
        padding: 15px
    }

    .metrics {
        gap: 7px
    }

    .metric {
        padding: 12px
    }

    .metric strong {
        font-size: 24px
    }

    header {
        align-items: flex-start;
        flex-direction: column
    }

    .overview-tabs {
        width: 100%
    }

    .overview-tab {
        flex: 1
    }
}