:root {
  --gl-thread-teal: #009688;
}

.gl-wizard-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.gl-step {
    display: none;
}

.gl-step.is-active {
    display: block;
}

.gl-step .form-group label {
    font-weight: 700;
    margin-bottom: var(--su6);
}

.gl-actions {
    display: flex;
    gap: var(--su8);
}

.gl-actions .gl-btn-next,
.gl-actions .gl-btn-submit {
    margin-left: auto;
}

.gl-progress-wrap {
    height: 6px;
}

.gl-thumb-120 {
    width: 120px;
    height: 120px;
    object-fit: cover;
}

.gl-prewrap {
    white-space: pre-wrap;
}

.gl-ellipsis-220 {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gl-autocomplete {
    position: relative;
}

.gl-autocomplete-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    width: 100%;
    z-index: 1050;
    max-height: 260px;
    overflow: auto;
    border: 1px solid rgba(0, 0, 0, .15);
    background: var(--so-white);
}

.gl-autocomplete-item {
    cursor: pointer;
}

.gl-autocomplete-item.is-active {
    background: rgba(13, 110, 253, .08);
}

.gl-autocomplete-item__line1 {
    display: flex;
    gap: var(--su8);
    align-items: baseline;
}

.gl-autocomplete-item__code {
    font-weight: 700;
    letter-spacing: .2px;
}

.gl-autocomplete-item__line2 {
    font-size: .875rem;
}

.gl-hscode-tree {
    min-height: 1.25rem;
    padding-left: 0;
}

.gl-finalization-field + .gl-finalization-field {
    margin-top: var(--su12);
}

.gl-finalization-label {
    margin-bottom: var(--su4);
    font-size: .875rem;
    font-weight: 700;
    color: var(--so-black-400);
}

.gl-finalization-code {
    display: inline-flex;
    align-items: center;
    gap: var(--su4);
    flex-wrap: nowrap;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--so-black-600);
}

.gl-finalization-code__value {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.gl-finalization-code__sep {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--so-black-400);
}

.gl-finalization-code__name {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--so-black-500);
}

.gl-finalization-reason {
    line-height: 1.6;
}

.gl-hscode-tree__title {
    margin-bottom: var(--su4);
}

.gl-hscode-tree__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--su4);
}

.gl-hscode-tree__item {
    display: flex;
    align-items: baseline;
    padding: var(--su4) var(--su8);
    border-left: 4px solid #D6D9DC;
    line-height: var(--bs-body-line-height);
    word-break: break-word;
}

.gl-hscode-tree__item--depth-0 {
    margin-left: 0;
    border-left-color: var(--hsc-category-purple);
    background: var(--so-black-100);
}

.gl-hscode-tree__item--depth-1 {
    margin-left: 0;
    border-left-color: var(--hsc-indigo-thread);
}

.gl-hscode-tree__item--depth-2 {
    margin-left: 0;
    border-left-color: var(--bs-primary);
}

.gl-hscode-tree__item--depth-3 {
    margin-left: 0;
    border-left-color: var(--gl-thread-teal);
}

.gl-hscode-tree__item--depth-4 {
    margin-left: 0;
    border-left-color: var(--bs-success);
}

.gl-hscode-tree__code {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.gl-hscode-tree__code:hover {
    text-decoration: underline;
}

.gl-hscode-tree__name {
    margin-left: var(--su8);
    font-size: .875rem;
}

.gl-dialog-thread .gl-dialog-q,
.gl-dialog-thread .gl-dialog-a {
    padding: var(--su8) var(--su12);
    border: 1px solid rgba(0, 0, 0, .08);
    background: var(--so-black-100);
}

.gl-dialog-thread .gl-dialog-a {
    background: var(--so-white);
}

.gl-dialog-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--su4) var(--su8);
}

.gl-dialog-content {
    line-height: 1.6;
    word-break: break-word;
}

.gl-dialog-post {
    display: flex;
    flex-direction: column;
    gap: var(--su8);
}

.gl-dialog-post__body {
    min-width: 0;
}

.gl-dialog-post__sig {
    display: flex;
    justify-content: flex-end;
}

.gl-dialog-post--left .gl-dialog-post__sig {
    justify-content: flex-start;
}

.gl-dialog-post--right .gl-dialog-post__sig {
    justify-content: flex-end;
}

.gl-dialog-sig {
    max-width: 170px;
    display: flex;
    gap: var(--su8);
    align-items: flex-start;
    padding: var(--su6) var(--su8);
    background: var(--so-black-150);
    border: 1px solid rgba(0, 0, 0, .06);
}

.gl-dialog-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    object-fit: cover;
    background: var(--so-black-150);
}

.gl-dialog-sig__meta {
    min-width: 0;
}

.gl-dialog-username {
    font-weight: 600;
    color: var(--so-blue-500);
    line-height: 1.2;
    word-break: break-word;
}

.gl-dialog-userrole,
.gl-dialog-time {
    font-size: .75rem;
    color: var(--so-black-400);
    line-height: 1.2;
}

@media (max-width: 576px) {
    .gl-dialog-post__sig {
        justify-content: flex-start;
    }

    .gl-dialog-sig {
        max-width: 100%;
    }
}

/* ===== Field-row layout (Detail page) ===== */

.gl-field-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: var(--su12);
    border-bottom: 1px solid var(--so-black-100);
}

.gl-field-row:last-child {
    border-bottom: none;
}

.gl-field-label {
    font-weight: 500;
    margin-bottom: var(--su4);
    font-size: var(--fs-body1);
    color: var(--so-black-500);
}

.gl-field-value {
    word-break: break-word;
    font-size: var(--fs-body1);
}

/* ===== Detail page card ===== */

.gl-detail-card {
    border: 1px solid var(--so-black-150);
    border-radius: var(--br-sm);
    box-shadow: none;
    background-color: var(--so-white);
}

/* ===== Field row active state ===== */

.gl-field-active {
    background-color: var(--so-black-150);
    border-left: 4px solid var(--bs-primary);
    margin-left: calc(-1 * var(--su16));
    padding-left: calc(var(--su16) - var(--su4));
}

/* ===== Discussion panel (sticky right side) ===== */

.gl-discussion-panel {
    position: sticky;
    top: var(--su16);
}

/* ===== Pin button ===== */

.gl-pin-btn {
    cursor: pointer;
    color: var(--fc-light);
    transition: color 0.2s;
    background: none;
    border: none;
    padding: 0;
    font-size: var(--fs-body2);
}

.gl-pin-btn:hover {
    color: var(--so-black-500);
}

.gl-pin-btn.is-active {
    color: var(--bs-primary);
}

/* ===== Ask input area ===== */

.gl-ask-input .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    border-color: var(--bs-primary);
}

/* ===== Discussion badge (Detail page) — SO tag style ===== */

.gl-discussion-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--su4);
    background-color: var(--so-black-150);
    border: 1px solid var(--so-black-200);
    color: var(--so-blue-400);
    font-weight: 700;
    padding: var(--su4) var(--su8);
    border-radius: var(--br-sm);
    font-size: var(--fs-caption);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    line-height: var(--lh-sm);
}

.gl-discussion-badge:hover {
    background-color: var(--so-blue-400);
    border-color: var(--so-blue-400);
    color: var(--so-white);
}

.gl-discussion-badge .badge {
    font-size: 0.7rem;
}

/* ===== Discuss page ===== */

.gl-discuss-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--su8) var(--su16);
    padding-bottom: var(--su16);
    margin-bottom: var(--su24);
    border-bottom: 1px solid var(--bs-border-color);
}

.gl-discuss-header__title {
    font-size: 1.1rem;
    font-weight: 700;
}

.gl-discuss-header__meta {
    font-size: 0.875rem;
    color: var(--so-black-400);
}

/* ===== New question bar ===== */

.gl-new-question-bar .form-control:focus {
    box-shadow: none;
    border-color: hsl(216, 88%, 60%);
}

/* ===== Q&A item ===== */

.gl-qa-item {
    padding: var(--su16) 0;
    border-bottom: 1px solid var(--so-black-100);
}

.gl-qa-item:last-child {
    border-bottom: none;
}

.gl-qa-icon {
    font-size: 1.1rem;
    margin-top: var(--su2);
    flex-shrink: 0;
}

.gl-qa-body {
    min-width: 0;
}

.gl-qa-question {
    font-weight: 600;
}

.gl-qa-meta {
    font-size: 0.875rem;
    color: var(--so-black-400);
    display: flex;
    flex-wrap: wrap;
    gap: var(--su4) var(--su12);
    margin-top: var(--su4);
}

/* ===== Empty discussion state ===== */

.gl-empty-discussion {
    text-align: center;
    color: var(--so-black-400);
    padding: var(--su24) var(--su16);
}

.gl-empty-discussion i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: var(--su8);
}

/* ===== Back link ===== */

.gl-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--su4);
    font-size: 0.875rem;
}

/* ===== SO-style metadata bar (below title) ===== */

.gl-meta-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: var(--su8);
    margin-bottom: var(--su16);
    border-bottom: 1px solid var(--so-black-200);
    gap: var(--su16);
    font-size: var(--fs-body1);
}

.gl-meta-bar__item {
    white-space: nowrap;
}

.gl-meta-bar__label {
    color: var(--fc-light);
    margin-right: var(--su4);
}

/* ===== SO-style post layout (discussions, finalization) ===== */

.gl-post {
    border-bottom: 1px solid var(--so-black-100);
    padding: var(--su16) 0;
}

.gl-post:first-child {
    padding-top: 0;
}

.gl-post__body {
    font-size: var(--fs-body1);
    line-height: var(--lh-md);
    word-break: break-word;
}

.gl-post__body p {
    margin-bottom: var(--su8);
}

/* ===== SO-style post signature (user card below post) ===== */

.gl-post-signature {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--su16);
    padding-top: var(--su8);
}

.gl-user-card {
    display: flex;
    gap: var(--su8);
    align-items: flex-start;
    padding: var(--su8) var(--su12);
    border-radius: var(--br-sm);
    background-color: var(--so-black-150);
}

.gl-user-card__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--br-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--so-black-200);
}

.gl-user-card__info {
    min-width: 0;
    font-size: var(--fs-caption);
    line-height: var(--lh-sm);
}

.gl-user-card__name {
    font-weight: 500;
    color: var(--bs-link-color);
}

.gl-user-card__role {
    color: var(--fc-light);
    font-weight: 500;
}

.gl-user-card__time {
    color: var(--fc-light);
}

/* ===== SO-style accepted mark (finalized indicator) ===== */

.gl-accepted-mark {
    display: flex;
    align-items: center;
    gap: var(--su4);
    color: var(--so-green-400);
    font-weight: 700;
    font-size: var(--fs-caption);
}

/* ===== Right sidebar widget (s-sidebarwidget pattern) ===== */

.gl-sidebar-widget {
    background-color: var(--so-white);
    border: 1px solid var(--so-black-150);
    border-radius: var(--br-sm);
    margin-bottom: var(--su12);
}

.gl-sidebar-widget__header {
    padding: var(--su12) var(--su16);
    font-size: var(--fs-caption);
    font-weight: 700;
    color: var(--so-black-400);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--so-black-150);
}

.gl-sidebar-widget__content {
    padding: var(--su12) var(--su16);
}

.gl-sidebar-widget__item {
    padding: var(--su8) 0;
    border-bottom: 1px solid var(--so-black-100);
    font-size: var(--fs-body1);
}

.gl-sidebar-widget__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.gl-sidebar-widget__item:first-child {
    padding-top: 0;
}

/* ===== Finalization block (SO answer style) ===== */

.gl-finalize-post {
    border-bottom: 1px solid var(--so-black-100);
    padding: var(--su16) 0;
}

.gl-finalize-post__header {
    display: flex;
    align-items: center;
    gap: var(--su8);
    margin-bottom: var(--su12);
    font-size: var(--fs-body2);
    font-weight: 500;
}

.gl-finalize-code-display {
    font-size: var(--fs-headline1);
    font-weight: 700;
    color: var(--so-black-600);
    line-height: 1.5;
}

.gl-finalize-code-display__sep {
    font-size: var(--fs-body2);
    font-weight: 500;
    color: var(--fc-light);
}

.gl-finalize-code-display__name {
    font-size: var(--fs-body3);
    font-weight: 500;
    color: var(--so-black-500);
}

/* ===== Discussion Panel (right sidebar) ===== */

.gl-discuss-panel {
    position: sticky;
    top: var(--su16);
    border: 1px solid var(--so-black-150);
    border-radius: var(--br-sm);
    background-color: var(--so-white);
    padding: var(--su12) var(--su16);
}

.gl-discuss-panel__header {
    display: flex;
    align-items: baseline;
    gap: var(--su8);
    padding-bottom: var(--su8);
    margin-bottom: var(--su12);
    border-bottom: 1px solid var(--so-black-200);
}

.gl-discuss-panel__title {
    font-size: var(--fs-body1);
    font-weight: 700;
}

.gl-discuss-panel__count {
    font-size: var(--fs-caption);
    color: var(--fc-light);
}

/* ===== New topic form ===== */

.gl-new-topic {
    margin-bottom: var(--su12);
}

.gl-new-topic textarea {
    border-radius: var(--br-sm);
    border-color: var(--so-black-200);
    font-size: var(--fs-caption);
}

.gl-new-topic textarea:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.15);
}

/* ===== Topic list ===== */

.gl-topic {
    border-bottom: 1px solid var(--so-black-100);
}

.gl-topic:last-child {
    border-bottom: none;
}

/* ===== Topic expanded state ===== */

.gl-topic.is-expanded {
    border-left: 3px solid var(--bs-primary);
    margin-left: calc(-1 * var(--su8));
    padding-left: var(--su8);
    background: rgba(var(--bs-primary-rgb), 0.025);
    border-radius: 0 var(--br-sm) var(--br-sm) 0;
}

.gl-topic.is-expanded .gl-topic__summary {
    background: rgba(var(--bs-primary-rgb), 0.06);
    margin-left: calc(-1 * var(--su8));
    margin-right: 0;
    padding-left: var(--su8);
    padding-right: 0;
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.15);
    border-radius: 0 var(--br-sm) 0 0;
}

.gl-topic.is-expanded .gl-topic__title {
    white-space: normal;
    overflow: visible;
}

/* ===== Topic summary (collapsed) ===== */

.gl-topic__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--su4);
    padding: var(--su8) 0;
    cursor: pointer;
    transition: background 0.1s;
}

.gl-topic__summary:hover {
    background: var(--so-black-100);
    margin: 0 calc(-1 * var(--su8));
    padding-left: var(--su8);
    padding-right: var(--su8);
    border-radius: var(--br-sm);
}

.gl-topic.is-expanded .gl-topic__summary:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 0 var(--br-sm) 0 0;
}

.gl-topic__q-badge {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
    padding: 1px var(--su4);
    border-radius: 3px;
}

.gl-topic__title {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-caption);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gl-topic__meta {
    width: 100%;
    font-size: 0.7rem;
    color: var(--fc-light);
    padding-left: calc(var(--su8) + var(--su2));
}

/* ===== Topic detail (expanded) ===== */

.gl-topic__detail {
    padding: var(--su4) 0 var(--su12) 0;
}

.gl-topic-msg {
    padding: var(--su8) 0;
    border-bottom: 1px solid var(--so-black-100);
}

.gl-topic-msg:last-child {
    border-bottom: none;
}

.gl-topic-msg__content {
    font-size: var(--fs-caption);
    line-height: var(--lh-sm);
    word-break: break-word;
    margin-bottom: var(--su4);
}

.gl-topic-msg__sig {
    display: flex;
    align-items: center;
    gap: var(--su6);
    font-size: 0.7rem;
    color: var(--fc-light);
}

.gl-topic-msg__avatar {
    width: 20px;
    height: 20px;
    border-radius: var(--br-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--so-black-200);
}

.gl-topic-msg__name {
    font-weight: 500;
    color: var(--bs-link-color);
}

/* ===== Reply form inside expanded topic ===== */

.gl-topic-reply {
    margin-top: var(--su8);
}

.gl-topic-reply textarea {
    border-radius: var(--br-sm);
    border-color: var(--so-black-200);
    font-size: var(--fs-caption);
    padding: var(--su6) var(--su8);
}

.gl-topic-reply textarea:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.15);
}

/* ===== Empty state ===== */

.gl-no-topics {
    text-align: center;
    color: var(--fc-light);
    padding: var(--su16) 0;
    font-size: var(--fs-caption);
}

/* ===== Countdown widget ===== */

.gl-countdown-value {
    font-size: var(--fs-headline1);
    font-weight: 700;
    color: var(--so-black-600);
    font-variant-numeric: tabular-nums;
}

/* ===== Creator widget ===== */

.gl-creator-widget {
    margin-bottom: var(--su12);
}

.gl-creator-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--br-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--so-black-200);
}