main.marker .be-card {
    background: var(--module-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 10px 12px 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow: visible;
    margin-bottom: 12px;
}

main.marker .be-card:last-child {
    margin-bottom: 0;
}

main.marker #marker-stats {
    margin-bottom: 12px;
}

main.marker .be-card-title {
    letter-spacing: 0.09em;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--input-border);
    color: var(--link-color);
}

main.marker .be-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
}

main.marker .be-row:last-child {
    margin-bottom: 0;
}

main.marker .be-row > label {
    margin: 0;
}

main.marker .be-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}

main.marker .hint-text {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (max-width: 700px) {
    main.marker .be-row {
        grid-template-columns: 1fr;
    }
}

.marker-setter .marker-start-form {
    max-width: 520px;
}

.marker-button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.marker-button-row form {
    margin: 0;
}

.marker-big-button {
    padding: 0.6rem 1.6rem !important;
    font-size: 1rem !important;
}

.marker-live-hint {
    margin: 0;
}

.marker-running {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--accent-color);
    border-radius: var(--border-radius);
    background: rgba(var(--accent-color-rgb), 0.06);
    box-shadow: 0 0 12px rgba(var(--accent-color-rgb), 0.25);
}

.marker-running-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-color);
    flex: 0 0 auto;
}

.marker-running-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1 1 200px;
}

.marker-running-clock {
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
    font-size: 13px;
}

.marker-chip {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(var(--accent-color-rgb), 0.85);
    color: #fff;
}

.marker-chip-auto {
    background: var(--border-color);
    color: var(--text-color);
}

.marker-chip-partner {
    background: transparent;
    border: 1px solid rgba(var(--accent-color-rgb), 0.85);
    color: var(--text-color);
}

.marker-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.marker-video-pick {
    margin-left: auto;
}

main.marker .marker-list-head .choices {
    margin-left: auto;
    margin-bottom: 0;
    min-width: 260px;
}

.marker-group {
    margin-top: 14px;
}

.marker-group:first-of-type {
    margin-top: 4px;
}

.marker-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.marker-group-fold > .marker-group-head {
    list-style: none;
    cursor: pointer;
    padding: 8px 10px;
    margin-bottom: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: rgba(var(--accent-color-rgb), 0.04);
}

.marker-group-fold > .marker-group-head::-webkit-details-marker {
    display: none;
}

.marker-group-fold > .marker-group-head::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--text-color);
    border-bottom: 2px solid var(--text-color);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
    opacity: 0.7;
}

.marker-group-fold[open] > .marker-group-head::before {
    transform: rotate(45deg);
}

.marker-group-fold[open] > .marker-group-head {
    margin-bottom: 6px;
}

.marker-group-head .hint-text {
    margin: 0;
}

.marker-group-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.marker-group-name {
    font-weight: 700;
}

.marker-copy {
    margin-left: auto;
    font-size: 12px;
}

.marker-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.marker-row {
    display: grid;
    grid-template-columns: 90px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: rgba(var(--accent-color-rgb), 0.04);
}

.marker-time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.marker-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.marker-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    opacity: 0.8;
}

.marker-row-edit {
    font-size: 12px;
}

@media (max-width: 700px) {
    .marker-row {
        grid-template-columns: 80px 1fr;
    }

    .marker-meta,
    .marker-row-edit {
        grid-column: 2;
    }
}

.marker-edit {
    margin: 4px 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--accent-color);
    border-radius: var(--border-radius);
}

.marker-edit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.marker-action-left {
    margin-right: auto;
}

main.marker .marker-time-input {
    flex: 0 1 130px;
    font-variant-numeric: tabular-nums;
}

.marker-category-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.marker-category-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.marker-category-row input[type="text"] {
    flex: 1 1 200px;
    min-width: 0;
}

.marker-category-row input[type="color"] {
    flex: 0 0 auto;
    width: 42px;
    height: 32px;
    padding: 2px;
    cursor: pointer;
}

.marker-category-new {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--input-border);
}

.marker-retro > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}

.marker-retro > summary::-webkit-details-marker {
    display: none;
}

.marker-retro > summary::before {
    content: "";
    width: 0;
    height: 0;
    flex: 0 0 auto;
    border-left: 6px solid currentColor;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    opacity: 0.6;
    transition: transform 0.15s ease;
}

.marker-retro[open] > summary::before {
    transform: rotate(90deg);
}

.marker-retro > summary + p {
    margin-top: 10px;
}