.drawing-concept,
.drawing-collection-panel,
.drawing-selection-card,
.drawing-mode-guide {
    margin-top: 1.15rem;
    padding: 1rem;
    border: 1px solid #ed86be;
    border-radius: 8px;
    background: #fffafd;
}

.drawing-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .8rem;
}

.drawing-section-heading h3 {
    margin: 0;
    font-size: .92rem;
    line-height: 1.2;
}

.drawing-section-heading p {
    margin: .22rem 0 0;
    font-size: .78rem;
    line-height: 1.45;
}

.drawing-section-heading--selected > div > span {
    display: block;
    margin-bottom: .2rem;
    color: #75839a;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
}

.drawing-layer-model {
    overflow: hidden;
    border: 1px solid #d9e1ec;
    border-radius: 7px;
    background: #f4f7fb;
}

.drawing-document-layer {
    position: relative;
    height: 116px;
    padding: 17px 18px;
}

.drawing-document-layer > i {
    display: block;
    width: 33%;
    height: 4px;
    margin: 0 0 10px;
    border-radius: 2px;
    background: #b8c6d8;
}

.drawing-document-layer > i:nth-of-type(2) { width: 23%; }
.drawing-document-layer > i:nth-last-of-type(-n+2) { width: 26%; margin-left: 72%; }

.drawing-canvas-layer {
    position: absolute;
    top: 14px;
    left: 35%;
    width: 38%;
    height: 82px;
    border: 2px solid #ed168c;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 22px rgba(30, 48, 76, .12);
}

.drawing-canvas-layer b { position: absolute; display: block; }
.drawing-canvas-layer b:nth-child(1) { top: 17px; left: 15px; width: 28px; height: 28px; border-radius: 50%; background: #7f5ed9; }
.drawing-canvas-layer b:nth-child(2) { top: 18px; left: 53px; width: 39px; height: 25px; background: #ec168c; }
.drawing-canvas-layer b:nth-child(3) { top: 48px; left: 39px; width: 26px; height: 26px; transform: rotate(45deg); background: #38b487; }
.drawing-canvas-layer b:nth-child(4) { top: 47px; left: 72px; width: 39px; height: 3px; transform: rotate(-21deg); background: #263850; }

.drawing-layer-labels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #d9e1ec;
    background: #fff;
}

.drawing-layer-labels span { padding: .55rem .65rem; border-right: 1px solid #e2e7ef; }
.drawing-layer-labels span:last-child { border-right: 0; }
.drawing-layer-labels strong,
.drawing-layer-labels small { display: block; }
.drawing-layer-labels strong { font-size: .72rem; }
.drawing-layer-labels small { margin-top: .12rem; color: #75839a; font-size: .61rem; line-height: 1.3; }

.drawing-marker-control,
.drawing-behavior-control label {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}

.drawing-marker-control {
    margin-top: .8rem;
    font-size: .75rem;
}

.drawing-marker-control input,
.drawing-behavior-control input { accent-color: #ec168c; }
.drawing-marker-control strong,
.drawing-marker-control small { display: block; }
.drawing-marker-control small { margin-top: .1rem; color: #75839a; font-size: .66rem; }

.drawing-selection-card { background: #fff; }
.drawing-collection-panel { background: #fff; }
.drawing-collection-panel .drawing-section-heading > span { flex: 0 0 auto; color: #75839a; font-size: .65rem; font-weight: 700; }
.drawing-collection-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.drawing-collection-list > p { grid-column: 1 / -1; margin: 0; color: #75839a; font-size: .7rem; }
.drawing-collection-list button { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .5rem; min-width: 0; padding: .55rem; border: 1px solid #dbe3ee; border-radius: 7px; background: #f8fafc; text-align: left; }
.drawing-collection-list button:hover,
.drawing-collection-list button.is-active { border-color: #ec168c; background: #fff5fa; }
.drawing-collection-list button > span { position: relative; grid-row: 1 / 3; width: 34px; height: 30px; border: 1px solid #9eafc3; background: #fff; }
.drawing-collection-list button > span i { position: absolute; display: block; background: #ec168c; }
.drawing-collection-list button > span i:nth-child(1) { top: 6px; left: 5px; width: 8px; height: 8px; border-radius: 50%; }
.drawing-collection-list button > span i:nth-child(2) { top: 6px; right: 5px; width: 10px; height: 8px; }
.drawing-collection-list button > span i:nth-child(3) { bottom: 4px; left: 12px; width: 9px; height: 9px; transform: rotate(45deg); }
.drawing-collection-list button strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.drawing-collection-list button small { overflow: hidden; color: #75839a; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.drawing-selection-card.is-empty { border-color: #d9e1ec; background: #f8fafc; }

.drawing-selection-empty {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 54px;
}

.drawing-selection-empty strong,
.drawing-selection-empty small { display: block; }
.drawing-selection-empty strong { font-size: .8rem; }
.drawing-selection-empty small { margin-top: .15rem; color: #75839a; font-size: .7rem; line-height: 1.35; }

.drawing-empty-visual {
    position: relative;
    flex: 0 0 48px;
    height: 42px;
    border: 1px dashed #9dafc5;
    background: #fff;
}

.drawing-empty-visual i { position: absolute; display: block; background: #a9b8ca; }
.drawing-empty-visual i:nth-child(1) { top: 9px; left: 8px; width: 12px; height: 12px; border-radius: 50%; }
.drawing-empty-visual i:nth-child(2) { top: 10px; right: 8px; width: 14px; height: 11px; }
.drawing-empty-visual i:nth-child(3) { bottom: 8px; left: 17px; width: 15px; height: 15px; transform: rotate(45deg); }

.drawing-state-badge {
    flex: 0 0 auto;
    padding: .3rem .55rem;
    border-radius: 999px;
    background: #e9f2fd;
    color: #34628f;
    font-size: .65rem;
    font-weight: 700;
}

.drawing-state-badge.is-active { background: #fff0f7; color: #b70b69; }

.drawing-object-visual {
    position: relative;
    height: 126px;
    margin-bottom: .8rem;
    border: 1px solid #dbe3ee;
    background: linear-gradient(#f8fafc 50%, #eef3f8 50%);
}

.drawing-selection-handles { position: absolute; inset: 17px 38px 34px; border: 2px solid #ec168c; background: #fff; }
.drawing-selection-handles i { position: absolute; width: 7px; height: 7px; border: 1px solid #ec168c; background: #fff; }
.drawing-selection-handles i:nth-child(1) { top: -5px; left: -5px; }
.drawing-selection-handles i:nth-child(2) { top: -5px; right: -5px; }
.drawing-selection-handles i:nth-child(3) { bottom: -5px; left: -5px; }
.drawing-selection-handles i:nth-child(4) { right: -5px; bottom: -5px; }
.drawing-shape { position: absolute; z-index: 1; display: block; }
.drawing-shape--circle { top: 34px; left: 25%; width: 29px; height: 29px; border-radius: 50%; background: #7c5bd7; }
.drawing-shape--rect { top: 33px; left: 44%; width: 42px; height: 27px; background: #ec168c; }
.drawing-shape--diamond { top: 39px; right: 26%; width: 26px; height: 26px; transform: rotate(45deg); background: #39b386; }
.drawing-shape--line { top: 69px; left: 34%; width: 32%; height: 3px; transform: rotate(-7deg); background: #27384f; }
.drawing-object-visual small { position: absolute; right: .55rem; bottom: .35rem; left: .55rem; overflow: hidden; color: #75839a; font-size: .62rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.drawing-property-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: .9rem;
    border: 1px solid #dbe3ee;
    border-radius: 7px;
}

.drawing-property-grid > div { min-width: 0; padding: .55rem .65rem; border-right: 1px solid #dbe3ee; border-bottom: 1px solid #dbe3ee; }
.drawing-property-grid > div:nth-child(2n) { border-right: 0; }
.drawing-property-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.drawing-property-grid span,
.drawing-property-grid strong { display: block; }
.drawing-property-grid span { color: #75839a; font-size: .62rem; }
.drawing-property-grid strong { overflow: hidden; margin-top: .15rem; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }

.drawing-format-controls { display: grid; gap: .65rem; }
.drawing-size-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.drawing-size-row label { min-width: 0; }
.drawing-size-row label > span { display: flex; align-items: center; gap: .3rem; margin-top: .25rem; color: #75839a; font-size: .68rem; }
.drawing-size-row input { min-width: 0; width: 100%; padding: .45rem .5rem; border: 1px solid #d6deea; border-radius: 6px; font-size: .75rem; }

.drawing-format-controls .demo-text-input { margin-top: .28rem; }

.drawing-alignment-control { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid #d6deea; border-radius: 7px; }
.drawing-alignment-control button { min-height: 34px; border: 0; border-right: 1px solid #d6deea; background: #fff; color: #51627a; font-size: .7rem; }
.drawing-alignment-control button:last-child { border-right: 0; }
.drawing-alignment-control button:hover:not(:disabled),
.drawing-alignment-control button.is-active { background: #fff0f7; color: #b70b69; }
.drawing-alignment-control button:disabled { color: #adb7c5; background: #f5f7fa; }
.drawing-control-hint { margin-top: -.35rem; color: #75839a; font-size: .64rem; line-height: 1.35; }

.drawing-behavior-control { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; padding: .65rem; border-radius: 7px; background: #f4f7fb; }
.drawing-behavior-control label { font-size: .68rem; }

.drawing-mode-guide { background: #fff; }
.drawing-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.drawing-mode-grid > div { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .65rem; border: 1px solid #dbe3ee; border-radius: 7px; background: #f8fafc; }
.drawing-mode-grid > div.is-current { border-color: #ec168c; background: #fff5fa; }
.drawing-mode-grid > div > span { position: relative; flex: 0 0 38px; height: 34px; border: 1px solid #aebdce; background: #fff; }
.drawing-mode-grid > div:first-child > span i { position: absolute; inset: -3px; border: 1px dashed #ec168c; }
.drawing-mode-grid > div:last-child > span i { position: absolute; display: block; background: #ec168c; }
.drawing-mode-grid > div:last-child > span i:nth-child(1) { top: 7px; left: 6px; width: 9px; height: 9px; border-radius: 50%; }
.drawing-mode-grid > div:last-child > span i:nth-child(2) { top: 8px; right: 6px; width: 11px; height: 8px; }
.drawing-mode-grid > div:last-child > span i:nth-child(3) { bottom: 5px; left: 14px; width: 10px; height: 10px; transform: rotate(45deg); }
.drawing-mode-grid strong,
.drawing-mode-grid small { display: block; }
.drawing-mode-grid strong { font-size: .72rem; }
.drawing-mode-grid small { margin-top: .12rem; color: #75839a; font-size: .62rem; line-height: 1.35; }

@media (max-width: 520px) {
    .drawing-layer-labels,
    .drawing-collection-list,
    .drawing-mode-grid { grid-template-columns: 1fr; }
    .drawing-layer-labels span { border-right: 0; border-bottom: 1px solid #e2e7ef; }
    .drawing-layer-labels span:last-child { border-bottom: 0; }
    .drawing-canvas-layer { left: 30%; width: 45%; }
}