/* Config Studio additions on top of mtik.css. Only what the panel has no equivalent for:
   wizard steps, script/code blocks, the port map, feature cards and the verification table. */

.cfg-steps {
    display: flex;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.cfg-steps li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .9rem .45rem .45rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-weight: 600;
    font-size: .875rem;
}
.cfg-steps li span {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    font-size: .8rem;
}
.cfg-steps li.is-active { border-color: var(--bs-primary); color: var(--bs-primary); }
.cfg-steps li.is-active span { background: var(--bs-primary); color: #fff; }
.cfg-steps li.is-done { color: var(--bs-success); border-color: var(--bs-success-border-subtle); }
.cfg-steps li.is-done span { background: var(--bs-success); color: #fff; }

.cfg-code {
    margin: 0;
    padding: 1rem;
    max-height: 520px;
    overflow: auto;
    background: #0f1720;
    color: #d6e2ee;
    border-radius: .5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .8125rem;
    line-height: 1.55;
    white-space: pre;
    tab-size: 4;
}
.cfg-code .c { color: #7f93a8; }
.cfg-code .m { color: #7cc4ff; }
.cfg-code .k { color: #f5c46b; }
.cfg-code .s { color: #9ee493; }
.cfg-terminal {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    min-height: 220px;
    background: #0f1720;
    color: #d6e2ee;
    border-color: #26323f;
}
.cfg-terminal:focus { background: #0f1720; color: #fff; }
.cfg-terminal::placeholder { color: #6c7d8f; }

.cfg-ports {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: .5rem;
}
.cfg-port {
    border: 1px solid var(--bs-border-color);
    border-left-width: 4px;
    border-radius: .4rem;
    padding: .4rem .55rem;
    font-size: .78rem;
    background: var(--bs-body-bg);
    line-height: 1.3;
}
.cfg-port b { display: block; font-size: .85rem; }
.cfg-port.role-wan { border-left-color: #d9480f; }
.cfg-port.role-bridge-port { border-left-color: #1c7ed6; }
.cfg-port.role-trunk { border-left-color: #7048e8; }
.cfg-port.role-lan { border-left-color: #0ca678; }
.cfg-port.role-pppoe-server { border-left-color: #e67700; }
.cfg-port.role-free { border-left-color: var(--bs-border-color); color: var(--bs-secondary-color); }

.cfg-feature {
    display: flex;
    gap: .85rem;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background: var(--bs-body-bg);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.cfg-feature:hover { border-color: var(--bs-primary); box-shadow: 0 .35rem 1rem rgba(13, 110, 253, .12); transform: translateY(-1px); color: inherit; }
.cfg-feature.is-disabled { opacity: .55; cursor: not-allowed; }
.cfg-feature__icon {
    flex: 0 0 2.5rem;
    height: 2.5rem;
    border-radius: .6rem;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}
.cfg-feature__title { font-weight: 600; margin-bottom: .15rem; }
.cfg-feature__desc { font-size: .82rem; color: var(--bs-secondary-color); margin: 0; }
.cfg-feature__why { font-size: .75rem; margin-top: .35rem; color: var(--bs-warning-text-emphasis); }

.cfg-kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; font-size: .875rem; margin: 0; }
.cfg-kv dt { color: var(--bs-secondary-color); font-weight: 500; }
.cfg-kv dd { margin: 0; }

.cfg-timeline { list-style: none; margin: 0; padding: 0; }
.cfg-timeline li { position: relative; padding: 0 0 1rem 1.6rem; border-left: 2px solid var(--bs-border-color); margin-left: .45rem; }
.cfg-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.cfg-timeline li::before {
    content: "";
    position: absolute;
    left: -.45rem;
    top: .15rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--bs-success);
    box-shadow: 0 0 0 3px var(--bs-body-bg);
}
.cfg-timeline li.is-accepted::before { background: var(--bs-warning); }

.cfg-verify-table td { vertical-align: top; font-size: .8125rem; }
.cfg-verify-table code { white-space: pre-wrap; word-break: break-all; }
.cfg-fix { border-left: 3px solid var(--bs-warning); padding-left: .75rem; margin-bottom: .75rem; }
.cfg-fix.fix-skip { border-left-color: var(--bs-success); }
.cfg-fix.fix-manual { border-left-color: var(--bs-danger); }

.cfg-prose ol li, .cfg-prose p { margin-bottom: .5rem; }
.cfg-model-option-note { font-size: .8rem; }
#modelSelect optgroup { font-weight: 700; }