/**
 * 全站可复用 UI 角标（不占文档流宽度/高度；依赖父级 position: relative）
 *
 * - .csg-anchor-tr          ：为角标提供定位上下文，常与标题等 shrink-to-fit 内容同用
 * - .csg-marker-layer-tl    ：零尺寸承载层，左上锚点；子元素 pointer-events:auto 可响应 title
 * - .csg-marker-yellow-star-tl ：左上小黄星（附加题等）
 * - .csg-marker-girl-tl      ：左上粉心（女队；与榜单 `team-girl` / `bi-heart-fill` 同源）
 * - .csg-marker-pair-tl      ：左上星 + 心并排（打星女队）
 * - .modified-indicator     ：表单项「已修改」右上圆点小黄星（评测机配置、课程组、题目编辑等）
 * - .csg-field-dirty        ：有修改未保存（配合 csg.formDirty）；控件淡蓝描边，区块外扩细线
 */
:root {
    --csg-marker-yellow-star-color: #ffc107;
    --csg-marker-yellow-star-shadow: 0 0 1px rgba(255, 255, 255, 0.95), 0 1px 2px rgba(0, 0, 0, 0.28);
    --csg-marker-girl-color: #ec4899;
    --csg-marker-girl-shadow: 0 0 1px rgba(255, 255, 255, 0.95), 0 1px 2px rgba(0, 0, 0.22);
    /* 左上悬浮角标相对锚点的位移（负 X = 再往左） */
    --csg-marker-tl-offset-x: -52%;
    --csg-marker-tl-offset-y: -44%;
    --csg-field-dirty-border: #86b7fe;
    --csg-field-dirty-ring: 0 0 0 0.2rem rgba(13, 110, 253, 0.22);
    --csg-field-dirty-block-offset: 0.35rem;
}

.csg-anchor-tr {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}

/* 左上：零占位锚点层，避免角标参与 shrink-to-fit 宽度计算 */
.csg-marker-layer-tl {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 2;
}

.csg-marker-yellow-star-tl {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(var(--csg-marker-tl-offset-x), var(--csg-marker-tl-offset-y));
    pointer-events: auto;
    color: var(--csg-marker-yellow-star-color);
    font-size: 0.7rem;
    line-height: 1;
    text-shadow: var(--csg-marker-yellow-star-shadow);
}

.csg-marker-yellow-star-tl .bi {
    display: block;
    line-height: 1;
    vertical-align: top;
}

/* 女队：与 rank `.team-type-icon.girl` 同色，布局同左上小黄星 */
.csg-marker-girl-tl {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(var(--csg-marker-tl-offset-x), var(--csg-marker-tl-offset-y));
    pointer-events: auto;
    color: var(--csg-marker-girl-color);
    font-size: 0.7rem;
    line-height: 1;
    text-shadow: var(--csg-marker-girl-shadow);
}

.csg-marker-girl-tl .bi {
    display: block;
    line-height: 1;
    vertical-align: top;
}

/* 打星女队：星与心并排，位置同单个左上角标（性质与女队正交，两样都要看得见） */
.csg-marker-pair-tl {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(var(--csg-marker-tl-offset-x), var(--csg-marker-tl-offset-y));
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
    font-size: 0.7rem;
    line-height: 1;
    white-space: nowrap;
}

.csg-marker-pair-tl .bi {
    display: block;
    line-height: 1;
}

.csg-marker-pair-tl__star {
    color: var(--csg-marker-yellow-star-color);
    text-shadow: var(--csg-marker-yellow-star-shadow);
}

.csg-marker-pair-tl__girl {
    color: var(--csg-marker-girl-color);
    text-shadow: var(--csg-marker-girl-shadow);
}

/* 表单项已修改：右上圆点小黄星（csg.formDirty / 评测机 / 课程组） */
.csg-form-dirty-host {
    position: relative;
    overflow: visible;
}
.modified-indicator {
    position: absolute;
    top: -5px;
    right: -5px;
    color: var(--csg-marker-yellow-star-color);
    font-size: 12px;
    z-index: 10;
    background: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}
.modified-indicator.is-on {
    display: flex;
}

.modified-indicator i {
    display: block;
    line-height: 1;
}

/* 有修改未保存：控件用淡蓝描边+光晕；区块用外扩细线（禁左侧色条 / 实心色头 / 贴边 1px） */
input.csg-field-dirty,
textarea.csg-field-dirty,
select.csg-field-dirty,
.form-control.csg-field-dirty,
.form-control.modified,
.csg-select-input.csg-field-dirty,
.csg-select-input.modified {
    outline: none;
    border-color: var(--csg-field-dirty-border);
    box-shadow: var(--csg-field-dirty-ring);
}
.csg-switch-track.csg-field-dirty,
.csg-switch-track.modified {
    outline: none;
    border-color: var(--csg-field-dirty-border);
    box-shadow: var(--csg-field-dirty-ring);
}
.csg-switch-setting.csg-field-dirty .csg-switch-track,
.csg-switch-setting.modified .csg-switch-track,
.csg-switch-input.csg-field-dirty + .csg-switch-track {
    outline: none;
    border-color: var(--csg-field-dirty-border);
    box-shadow: var(--csg-field-dirty-ring);
}
.form-control.csg-field-dirty.is-invalid,
.form-control.modified.is-invalid {
    outline: none;
    border-color: var(--bs-danger, #dc3545);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.csg-field-dirty:not(input):not(textarea):not(select):not(.form-control):not(.csg-select-input):not(.csg-switch-track):not(.csg-switch-setting) {
    outline: 1px solid var(--csg-field-dirty-border);
    outline-offset: var(--csg-field-dirty-block-offset);
    border-radius: 0.375rem;
}
.csg-form-dirty-host.csg-field-dirty > .modified-indicator {
    top: calc(-1 * var(--csg-field-dirty-block-offset) - 3px);
    right: calc(-1 * var(--csg-field-dirty-block-offset) - 3px);
}