/* ==========================================================================
   Shared styles for individual tool pages (editor chrome, gutters,
   syntax colors, tree view, toasts, segmented controls).
   ========================================================================== */

/* ---- breadcrumb + tool hero ---- */

.tool-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 22px 0 0;
    font-size: .84rem;
    color: var(--text-tertiary);
}
.tool-breadcrumb a { color: var(--text-tertiary); transition: color .2s; }
.tool-breadcrumb a:hover { color: var(--accent-1); }
.tool-breadcrumb .sep { opacity: .5; }
.tool-breadcrumb .current { color: var(--text-secondary); }

.tool-hero {
    padding: 20px 0 36px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.tool-hero-heading { display: flex; align-items: center; gap: 16px; }
.tool-hero-badge {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--accent-1);
    background: rgba(232, 163, 61, .12);
    border: 1px solid rgba(232, 163, 61, .3);
    flex-shrink: 0;
    animation: badgePop .5s var(--ease);
}
@keyframes badgePop {
    from { opacity: 0; transform: scale(.6) rotate(-8deg); }
    to   { opacity: 1; transform: none; }
}
.tool-hero h1 { font-size: 1.5rem; margin-bottom: 4px; }
.tool-hero-sub { color: var(--text-secondary); font-size: .92rem; max-width: 480px; }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: .84rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all .25s var(--ease);
}
.status-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-tertiary);
    transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.status-pill.is-valid { border-color: rgba(52, 211, 153, .35); color: #34d399; }
.status-pill.is-valid .dot { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
.status-pill.is-invalid { border-color: rgba(248, 113, 113, .35); color: #f87171; }
.status-pill.is-invalid .dot { background: #f87171; box-shadow: 0 0 0 4px rgba(248, 113, 113, .18); }
.status-pill.is-empty { color: var(--text-tertiary); }

/* ---- editor window chrome ---- */

.editor-window {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow .3s var(--ease), border-color .2s var(--ease);
}

.editor-titlebar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-wrap: wrap;
}

.traffic-lights { display: flex; gap: 7px; direction: ltr; }
.traffic-lights span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}
.traffic-lights .tl-red { background: #f87171; }
.traffic-lights .tl-yellow { background: #fbbf24; }
.traffic-lights .tl-green { background: #34d399; }

.editor-filename {
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--text-tertiary);
    direction: ltr;
}

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    flex-wrap: wrap;
}

.toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-divider { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }

.tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: .82rem;
    font-weight: 500;
    transition: all .18s var(--ease);
}
.tool-btn svg { width: 15px; height: 15px; }
.tool-btn:hover { color: var(--text-primary); border-color: var(--border-hover); background: var(--surface-hover); transform: translateY(-1px); }
.tool-btn:active { transform: translateY(0); }
.tool-btn.is-flash { animation: btnFlash .5s var(--ease); }
.tool-btn.is-active { color: var(--accent-1-ink); background: var(--gradient-brand); border-color: transparent; }
.tool-btn.is-active:hover { color: var(--accent-1-ink); }
.tool-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; transform: none; }
@keyframes btnFlash {
    0%   { box-shadow: 0 0 0 0 rgba(232, 163, 61, .5); }
    100% { box-shadow: 0 0 0 10px rgba(232, 163, 61, 0); }
}

/* segmented control */
.segmented {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 2px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    gap: 2px;
    box-sizing: border-box;
}
.segmented button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-fa);
    font-size: .78rem;
    font-weight: 600;
}
.segmented button.is-active { color: var(--text-primary); background: var(--surface-hover); }

/* ---- editor panes ---- */

.editor-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 860px) {
    .editor-body { grid-template-columns: 1fr; }
}

.editor-pane { display: flex; flex-direction: column; min-width: 0; transition: background .2s var(--ease), outline-color .2s var(--ease); }
.editor-pane.is-dragover { background: rgba(232, 163, 61, .07); outline: 2px dashed var(--accent-1); outline-offset: -6px; }
.editor-pane + .editor-pane { border-inline-start: 1px solid var(--border); }
@media (max-width: 860px) {
    .editor-pane + .editor-pane { border-inline-start: none; border-top: 1px solid var(--border); }
}

.pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: .78rem;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border);
}
.pane-head .view-toggle { display: flex; gap: 4px; }
.pane-head .view-toggle button {
    padding: 4px 10px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-tertiary);
    font-size: .76rem;
    transition: all .18s;
}
.pane-head .view-toggle button.is-active { background: var(--surface); border-color: var(--border); color: var(--text-primary); }

.code-area {
    display: flex;
    direction: ltr;
    text-align: left;
    height: 400px;
}

.code-gutter {
    flex-shrink: 0;
    padding: 14px 10px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: .82rem;
    line-height: 1.65;
    color: var(--text-tertiary);
    background: var(--surface);
    user-select: none;
    overflow: hidden;
}
.code-gutter div { transition: color .2s; }
.code-gutter div.is-error-line { color: #f87171; font-weight: 700; }

.code-input,
.code-output {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    font-family: var(--font-mono);
    font-size: .82rem;
    line-height: 1.65;
    color: var(--text-primary);
    background: transparent;
    border: none;
    resize: none;
    overflow: auto;
    white-space: pre;
}
.code-input:focus { outline: none; }
.code-input[readonly].has-file { color: var(--text-tertiary); font-style: italic; cursor: default; }
.code-input[readonly]:not(.has-file) { color: var(--text-secondary); }
.code-output { margin: 0; }
.code-output.is-hidden, .code-tree.is-hidden { display: none; }

.code-tree {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: .82rem;
}

/* json syntax colors */
.jf-key { color: #7dd3fc; }
.jf-string { color: #86efac; }
.jf-number { color: #fbbf24; }
.jf-boolean { color: #f0abfc; }
.jf-null { color: #f87171; }
.jf-punc { color: var(--text-tertiary); }

/* error shake + glow */
.editor-window.is-shaking { animation: shake .4s var(--ease); }
@keyframes shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.editor-window.has-error { border-color: rgba(248, 113, 113, .45); box-shadow: 0 0 0 4px rgba(248, 113, 113, .1); }

.error-banner[hidden] { display: none; }
.error-banner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 16px 0;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: rgba(248, 113, 113, .08);
    border: 1px solid rgba(248, 113, 113, .3);
    color: #fca5a5;
    font-size: .84rem;
    animation: fadeSlideIn .3s var(--ease);
}
.error-banner-head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.error-banner-head svg { width: 17px; height: 17px; flex-shrink: 0; }
.error-line-preview {
    direction: ltr;
    text-align: left;
    font-family: var(--font-mono);
    font-size: .78rem;
    background: rgba(0, 0, 0, .25);
    border-radius: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    color: var(--text-secondary);
    white-space: pre;
}
.error-line-preview .caret { color: #f87171; }
.error-actions { display: flex; gap: 18px; flex-wrap: wrap; }
.error-jump {
    color: #fca5a5;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: .8rem;
}
.error-jump:hover { color: #fecaca; }

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ---- stats bar ---- */

.stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.stat-item {
    flex: 1;
    min-width: 110px;
    padding: 14px 18px;
    text-align: center;
    border-inline-start: 1px solid var(--border);
}
.stat-item:first-child { border-inline-start: none; }
.stat-item .num {
    display: block;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-primary);
    transition: color .2s;
}
.stat-item .lbl { font-size: .74rem; color: var(--text-tertiary); margin-top: 2px; display: block; }

/* ---- tree view ---- */

.jt-node { margin: 1px 0; }
.jt-node details { margin: 0; }
.jt-node summary {
    list-style: none;
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .15s;
}
.jt-node summary::-webkit-details-marker { display: none; }
.jt-node summary:hover { background: var(--surface-hover); }

.jt-caret {
    display: inline-flex;
    width: 14px;
    color: var(--text-tertiary);
    transition: transform .2s var(--ease);
    flex-shrink: 0;
}
.jt-node details[open] > summary .jt-caret { transform: rotate(90deg); }

.jt-key { color: #7dd3fc; }
.jt-colon { color: var(--text-tertiary); }
.jt-type { color: var(--text-secondary); font-weight: 600; }
.jt-count { color: var(--text-tertiary); font-size: .78em; }

.jt-children {
    margin-inline-start: 10px;
    padding-inline-start: 12px;
    border-inline-start: 1px dashed var(--border);
}
.jt-children.jt-reveal { animation: treeReveal .25s var(--ease); }
@keyframes treeReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.jt-leaf { padding: 3px 4px 3px 20px; display: flex; gap: 6px; }

.tree-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.tree-actions button {
    font-size: .76rem;
    color: var(--text-tertiary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .15s;
}
.tree-actions button:hover { color: var(--accent-1); }

/* ==========================================================
   Form-style tools (timestamp converter, and similar).
   ========================================================== */

.ts-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 22px; }

.ts-section { display: flex; flex-direction: column; gap: 10px; }
.ts-label { font-size: .82rem; color: var(--text-secondary); font-weight: 600; }
.ts-label-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

.ts-field {
    height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: .95rem;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ts-field:focus { outline: none; border-color: var(--accent-1); background: var(--bg-elevated); box-shadow: 0 0 0 3px rgba(232, 163, 61, .15); }
.ts-field::placeholder { color: var(--text-tertiary); font-family: var(--font-fa); }

.ts-input-epoch { width: 100%; max-width: 380px; font-size: 1.1rem; }

.ts-datefields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ts-datefields .ts-field { width: 84px; text-align: center; }
.ts-datefields select.ts-field { width: 130px; text-align: right; padding-inline-end: 10px; }
.ts-sep { color: var(--text-tertiary); padding: 0 2px; }

.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.result-card {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.result-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.result-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.result-card-head span { font-size: .78rem; color: var(--text-tertiary); }
.copy-mini {
    display: inline-flex;
    color: var(--text-tertiary);
    transition: color .15s;
}
.copy-mini:hover { color: var(--accent-1); }
.copy-mini svg { width: 15px; height: 15px; }
.result-card-value {
    font-family: var(--font-mono);
    font-size: .92rem;
    color: var(--text-primary);
    direction: ltr;
    text-align: left;
    word-break: break-word;
}
.result-card-value.is-rtl { direction: rtl; text-align: right; font-family: var(--font-fa); }
.result-card-hint {
    margin-top: 6px;
    font-family: var(--font-fa);
    font-size: .76rem;
    line-height: 1.6;
    color: var(--text-tertiary);
    direction: rtl;
    text-align: right;
}

.result-summary {
    padding: 14px 18px;
    border-radius: var(--radius-md);
    background: rgba(232, 163, 61, .07);
    border: 1px solid rgba(232, 163, 61, .25);
    color: var(--text-primary);
    font-size: .92rem;
    line-height: 1.8;
    margin-bottom: 20px;
}
.result-summary strong { color: var(--accent-1); }

.ts-section.is-dragover { background: rgba(232, 163, 61, .07); outline: 2px dashed var(--accent-1); outline-offset: -6px; border-radius: var(--radius-md); }

.hash-match-ok { color: #34d399; font-weight: 600; font-size: .74rem; }
.hash-match-bad { color: #f87171; font-weight: 600; font-size: .74rem; }

.now-ticker {
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--text-tertiary);
    direction: ltr;
}

/* ---- toasts ---- */

.toast-stack {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 300;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5);
    font-size: .85rem;
    color: var(--text-primary);
    animation: toastIn .35s var(--ease);
}
.toast svg { width: 16px; height: 16px; color: #34d399; }
.toast.is-leaving { animation: toastOut .25s var(--ease) forwards; }
@keyframes toastIn {
    from { opacity: 0; transform: translateY(12px) scale(.94); }
    to   { opacity: 1; transform: none; }
}
@keyframes toastOut {
    to { opacity: 0; transform: translateY(8px) scale(.96); }
}

/* ---- misc ---- */

.tool-page-section { padding-bottom: 100px; }

.info-note {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: .86rem;
    align-items: flex-start;
}
.info-note svg { width: 18px; height: 18px; color: var(--accent-2); flex-shrink: 0; margin-top: 2px; }

/* ==========================================================
   Docker Compose validator: severity pill state, issue list,
   structure summary cards, jump-to-line flash.
   ========================================================== */

.status-pill.is-warning { border-color: rgba(251, 191, 36, .35); color: #fbbf24; }
.status-pill.is-warning .dot { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251, 191, 36, .18); }

.code-gutter div.is-jump-flash { animation: jumpFlash 1.1s var(--ease); }
@keyframes jumpFlash {
    0%, 100% { color: var(--text-tertiary); }
    25% { color: var(--accent-1); font-weight: 700; }
}

.issue-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    font-size: .78rem;
    color: var(--text-tertiary);
    flex-wrap: wrap;
}
.issue-count { display: inline-flex; align-items: center; gap: 6px; }
.issue-count .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.issue-count.ic-error .dot { background: #f87171; }
.issue-count.ic-warning .dot { background: #fbbf24; }
.issue-count.ic-info .dot { background: #7dd3fc; }

.tool-panel-view { height: 400px; display: flex; flex-direction: column; min-height: 0; }
.tool-panel-view.is-hidden { display: none; }

.issue-list { flex: 1; min-width: 0; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.issue-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px 20px;
    color: var(--text-tertiary);
    text-align: center;
    height: 100%;
    min-height: 240px;
}
.issue-empty svg { width: 38px; height: 38px; color: #34d399; }
.issue-empty strong { color: var(--text-primary); font-size: .92rem; }
.issue-empty span { font-size: .8rem; }

.issue-item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    text-align: right;
    transition: all .18s var(--ease);
    animation: fadeSlideIn .25s var(--ease);
}
.issue-item.is-clickable { cursor: pointer; }
.issue-item.is-clickable:hover { border-color: var(--border-hover); background: var(--surface-hover); }

.issue-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.issue-icon svg { width: 15px; height: 15px; }
.issue-item.sev-error .issue-icon { background: rgba(248, 113, 113, .12); color: #f87171; }
.issue-item.sev-warning .issue-icon { background: rgba(251, 191, 36, .12); color: #fbbf24; }
.issue-item.sev-info .issue-icon { background: rgba(125, 211, 252, .12); color: #7dd3fc; }

.issue-body { flex: 1; min-width: 0; }
.issue-msg { font-size: .84rem; color: var(--text-primary); line-height: 1.65; }
.issue-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.issue-path {
    font-family: var(--font-mono);
    font-size: .72rem;
    direction: ltr;
    color: var(--text-tertiary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1px 7px;
}
.issue-line { font-size: .74rem; color: var(--accent-1); font-weight: 600; white-space: nowrap; }

/* ---- structure summary ---- */

.dcv-summary { flex: 1; min-width: 0; overflow: auto; padding: 16px; }

.dcv-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dcv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: .78rem;
    color: var(--text-secondary);
}
.dcv-chip b { color: var(--text-primary); font-family: var(--font-mono); font-weight: 700; }

.dcv-group-title {
    font-size: .78rem;
    color: var(--text-tertiary);
    margin: 18px 0 8px;
    font-weight: 600;
}
.dcv-group-title:first-child { margin-top: 0; }

.service-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color .2s var(--ease);
}
.service-card:hover { border-color: var(--border-hover); }
.service-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
    flex-wrap: wrap;
}
.service-name { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); direction: ltr; }
.service-source {
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--text-tertiary);
    direction: ltr;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
}
.service-source.src-build { color: var(--accent-2); border-color: rgba(127, 182, 158, .3); }
.service-source.src-image { color: var(--accent-1); border-color: rgba(232, 163, 61, .3); }
.service-card-body { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.service-row { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; }
.service-row .srl { color: var(--text-tertiary); flex-shrink: 0; min-width: 64px; padding-top: 2px; }
.tag-group { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.mini-tag {
    font-family: var(--font-mono);
    font-size: .72rem;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    direction: ltr;
}
.mini-tag.mt-net { color: #7dd3fc; }
.mini-tag.mt-vol { color: #f0abfc; }
.mini-tag.mt-dep { color: var(--accent-2); }
.mini-tag.mt-warn { color: #fbbf24; }

.top-entity-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    margin-bottom: 8px;
    font-size: .82rem;
    flex-wrap: wrap;
}
.top-entity-name { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); direction: ltr; }
.top-entity-meta { color: var(--text-tertiary); font-size: .78rem; }

/* ==========================================================
   Nginx Config Helper: mode switch, form-style builder,
   nginx syntax highlighting.
   ========================================================== */

.ngx-status-row { padding: 14px 16px 0; display: flex; justify-content: flex-end; }

.mode-switch-row { padding: 4px 0 22px; display: flex; }
.mode-switch-row .segmented { height: 42px; }
.mode-switch-row .segmented button { padding: 0 18px; font-size: .84rem; }

.editor-window.is-hidden { display: none; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-1); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }

.ngx-check-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .84rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.ngx-check-row + .ngx-check-row { margin-top: 10px; }
.ngx-inline-fields { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ngx-inline-fields .ts-field { max-width: 120px; }
.ngx-inline-fields label { font-size: .78rem; color: var(--text-tertiary); }

.ngx-conditional { margin-top: 12px; padding-inline-start: 24px; border-inline-start: 2px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.ngx-conditional.is-hidden { display: none; }

.ngx-form-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; height: 460px; }
.ngx-form-body .ts-section { gap: 8px; }
.ngx-divider { height: 1px; background: var(--border); margin: 2px 0; }

.ngx-comment { color: var(--text-tertiary); font-style: italic; }
.ngx-string { color: #86efac; }
.ngx-var { color: #fbbf24; }
.ngx-directive { color: #7dd3fc; }

.code-area.is-tall, .tool-panel-view.is-tall { height: 460px; }

/* ==========================================================
   Kubernetes YAML Generator: field validation hint, multi-doc
   output stack.
   ========================================================== */

.ts-field.is-invalid { border-color: rgba(248, 113, 113, .55); }
.field-hint { font-size: .76rem; color: #f87171; min-height: 1.1em; }

.k8s-stack-body { padding: 18px 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.k8s-stack-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.k8s-stack-empty { padding: 10px 2px; color: var(--text-tertiary); font-size: .84rem; }
.k8s-chip-remove {
    margin-inline-start: 6px;
    color: var(--text-tertiary);
    font-size: 1rem;
    line-height: 1;
    transition: color .15s;
}
.k8s-chip-remove:hover { color: #f87171; }

/* ==========================================================
   Docker Image Size Calculator: layer breakdown bars.
   ========================================================== */

.layer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
}
.layer-row:last-child { border-bottom: none; }
.layer-idx {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-tertiary);
}
.layer-digest {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--text-secondary);
    direction: ltr;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.layer-bar-track {
    flex: 2;
    min-width: 60px;
    height: 7px;
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
}
.layer-bar-fill { height: 100%; border-radius: 999px; background: var(--gradient-brand); }
.layer-size {
    flex-shrink: 0;
    width: 76px;
    text-align: left;
    direction: ltr;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--text-primary);
    font-weight: 600;
}

.sample-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sample-chip-row .tool-btn { height: 32px; padding: 0 12px; font-size: .78rem; }

/* ==========================================================
   Cron Expression Generator: field-by-field builder grid.
   ========================================================== */

.cron-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.cron-field-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.cron-mode-segmented { width: 100%; justify-content: space-between; }
.cron-mode-segmented button { flex: 1; padding: 0 6px; }
.cron-subgroup.is-hidden { display: none; }
.cron-sep { color: var(--text-tertiary); font-size: .82rem; flex-shrink: 0; }

.chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-grid button {
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: .78rem;
    transition: all .15s var(--ease);
}
.chip-grid button:hover { border-color: var(--border-hover); }
.chip-grid button.is-active { background: var(--gradient-brand); color: var(--accent-1-ink); border-color: transparent; }

.cron-note {
    font-size: .82rem;
    color: #fbbf24;
    background: rgba(251, 191, 36, .08);
    border: 1px solid rgba(251, 191, 36, .25);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-top: 10px;
    line-height: 1.7;
}

.next-run-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 4px;
    border-bottom: 1px solid var(--border);
    font-size: .86rem;
    flex-wrap: wrap;
    gap: 8px;
}
.next-run-row:last-child { border-bottom: none; }
.next-run-jalali { color: var(--text-primary); }
.next-run-greg { color: var(--text-tertiary); font-family: var(--font-mono); font-size: .76rem; direction: ltr; }

/* ==========================================================
   Dockerfile analyzer: instruction badges + stage rows.
   ========================================================== */

.instr-badge {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    direction: ltr;
    flex-shrink: 0;
}
.instr-badge.instr-from { color: #f0abfc; background: rgba(240, 171, 252, .12); }
.instr-badge.instr-layer { color: #fbbf24; background: rgba(251, 191, 36, .12); }
.instr-badge.instr-meta { color: var(--text-tertiary); background: var(--bg-elevated); }

.dockerfile-line-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-bottom: 1px dashed var(--border);
    font-size: .8rem;
}
.dockerfile-line-row:last-child { border-bottom: none; }
.dockerfile-line-num {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--text-tertiary);
    width: 26px;
    text-align: left;
    flex-shrink: 0;
}
.dockerfile-line-args {
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--text-secondary);
    direction: ltr;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.stage-final-badge {
    font-size: .72rem;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(52, 211, 153, .12);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, .3);
}

/* ==========================================================
   Regex Tester
   ========================================================== */

.regex-pattern-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.regex-delim { font-family: var(--font-mono); font-size: 1.3rem; color: var(--accent-1); font-weight: 700; flex-shrink: 0; }
.regex-pattern-input {
    flex: 1;
    min-width: 200px;
    height: 42px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: .95rem;
    direction: ltr;
    text-align: left;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.regex-pattern-input:focus { outline: none; border-color: var(--accent-1); background: var(--bg-elevated); box-shadow: 0 0 0 3px rgba(232, 163, 61, .15); }
.regex-flags { display: flex; gap: 4px; flex-shrink: 0; }
.regex-flags button {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .82rem;
    transition: all .15s var(--ease);
}
.regex-flags button:hover { border-color: var(--border-hover); }
.regex-flags button.is-active { color: var(--accent-1-ink); background: var(--gradient-brand); border-color: transparent; }

.re-highlight-box {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: .84rem;
    line-height: 1.8;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 160px;
    overflow: auto;
    margin-bottom: 12px;
}
.re-match {
    background: rgba(232, 163, 61, .3);
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(232, 163, 61, .5);
}
.re-match.is-zero { display: inline-block; width: 2px; height: 1em; background: #f87171; vertical-align: middle; box-shadow: none; }
.re-match.is-current { background: rgba(232, 163, 61, .65); }

.re-match-card {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin-bottom: 8px;
}
.re-match-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.re-match-idx { font-size: .76rem; color: var(--text-tertiary); }
.re-match-text { font-family: var(--font-mono); font-size: .84rem; color: var(--accent-1); direction: ltr; word-break: break-all; }
.re-match-pos { font-family: var(--font-mono); font-size: .72rem; color: var(--text-tertiary); direction: ltr; }
.re-group-row { display: flex; align-items: center; gap: 8px; font-size: .78rem; padding: 3px 0; }
.re-group-label { font-family: var(--font-mono); color: #7dd3fc; min-width: 26px; flex-shrink: 0; }
.re-group-value { font-family: var(--font-mono); color: var(--text-secondary); direction: ltr; word-break: break-all; }
.re-group-value.is-undefined { color: var(--text-tertiary); font-style: italic; }

.rx-pattern {
    font-family: var(--font-mono);
    direction: ltr;
    color: #7dd3fc;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1px 7px;
    margin-inline-end: 8px;
    font-size: .78rem;
    flex-shrink: 0;
}
.rx-desc { color: var(--text-secondary); font-size: .82rem; }