.textpart-map-panel,
.textpart-list-panel,
.textpart-inspector {
    margin-top: 1.15rem;
    padding: 1rem;
    border: 1px solid #ed86be;
    border-radius: 8px;
    background: #fffafd;
}

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

.textpart-section-heading h3 { margin: 0; font-size: .92rem; line-height: 1.2; }
.textpart-section-heading p { margin: .22rem 0 0; font-size: .76rem; line-height: 1.42; }
.textpart-section-heading > span { flex: 0 0 auto; color: #75839a; font-size: .64rem; font-weight: 700; }
.textpart-section-heading--selected > div > span { display: block; margin-bottom: .18rem; color: #75839a; font-size: .62rem; font-weight: 700; text-transform: uppercase; }

.textpart-page-map {
    position: relative;
    min-height: 235px;
    padding: 12px;
    border: 1px solid #cfd9e6;
    background: #eef3f8;
}

.textpart-map-region { position: absolute; border: 1px solid #bcc9d8; background: #fff; color: #263850; text-align: left; transition: border-color .16s ease, background-color .16s ease; }
.textpart-map-region:hover:not(:disabled),
.textpart-map-region.is-active { border-color: #ec168c; background: #fff3f9; }
.textpart-map-region:disabled { opacity: .35; }
.textpart-map-region span,
.textpart-map-region small { display: block; }
.textpart-map-region span { font-size: .68rem; font-weight: 700; }
.textpart-map-region small { margin-top: .08rem; color: #75839a; font-size: .58rem; }
.textpart-map-region--header { top: 12px; right: 12px; left: 12px; height: 42px; padding: .45rem .65rem; border-top: 3px solid #ec168c; }
.textpart-map-region--main { top: 62px; right: 12px; bottom: 58px; left: 12px; padding: .65rem; }
.textpart-map-region--main i { display: block; width: 44%; height: 4px; margin-top: .65rem; border-radius: 2px; background: #cad5e2; }
.textpart-map-region--main i:nth-of-type(2) { width: 58%; }
.textpart-map-region--main i:nth-of-type(3) { width: 37%; }
.textpart-map-region--main i:nth-of-type(4) { width: 52%; }
.textpart-map-region--frame { top: 92px; right: 25px; width: 44%; min-height: 72px; padding: .65rem; border: 2px solid #805cda; box-shadow: 0 7px 18px rgba(45, 52, 74, .12); }
.textpart-map-region--footer { right: 12px; bottom: 10px; left: 12px; height: 40px; padding: .42rem .65rem; border-bottom: 3px solid #39b387; }

.textpart-type-summary { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; margin-top: .65rem; border: 1px solid #d9e1ec; border-radius: 7px; background: #fff; }
.textpart-type-summary span { padding: .5rem .6rem; border-right: 1px solid #d9e1ec; text-align: center; }
.textpart-type-summary span:last-child { border-right: 0; }
.textpart-type-summary i,
.textpart-type-summary small { display: block; }
.textpart-type-summary i { color: #b70b69; font-size: .82rem; font-style: normal; font-weight: 800; }
.textpart-type-summary small { margin-top: .05rem; color: #75839a; font-size: .57rem; }

.textpart-list-panel { background: #fff; }
.textpart-list { display: grid; gap: .42rem; }
.textpart-list > p { margin: 0; color: #75839a; font-size: .7rem; }
.textpart-list button { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 12px; grid-template-rows: auto auto; column-gap: .55rem; min-width: 0; padding: .55rem; border: 1px solid #dbe3ee; border-radius: 7px; background: #f8fafc; text-align: left; }
.textpart-list button:hover,
.textpart-list button.is-active { border-color: #ec168c; background: #fff5fa; }
.textpart-list button > span { position: relative; grid-column: 1; grid-row: 1 / 3; width: 34px; height: 32px; border: 1px solid #aebccd; background: #fff; }
.textpart-list button[data-textpart-type="mainText"] > span::before,
.textpart-list button[data-textpart-type="headerFooter"] > span::before,
.textpart-list button[data-textpart-type="textFrame"] > span::before { position: absolute; content: ""; }
.textpart-list button[data-textpart-type="mainText"] > span::before { inset: 6px; background: repeating-linear-gradient(to bottom, #9fb0c4 0 2px, transparent 2px 6px); }
.textpart-list button[data-textpart-type="headerFooter"] > span::before { top: 6px; right: 5px; left: 5px; height: 4px; border-top: 2px solid #ec168c; border-bottom: 1px solid #b9c6d5; }
.textpart-list button[data-textpart-type="textFrame"] > span::before { inset: 6px; border: 2px solid #805cda; background: #f2effc; }
.textpart-list button strong { grid-column: 2; grid-row: 1; overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.textpart-list button small { grid-column: 2; grid-row: 2; overflow: hidden; color: #75839a; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.textpart-list button > i { position: relative; grid-column: 3; grid-row: 1 / 3; align-self: center; width: 8px; height: 8px; transform: rotate(45deg); border-top: 1px solid #75839a; border-right: 1px solid #75839a; }

.textpart-inspector { background: #fff; }
.textpart-inspector.is-empty { border-color: #d9e1ec; background: #f8fafc; }
.textpart-inspector-empty { display: flex; align-items: center; gap: .7rem; min-height: 52px; }
.textpart-inspector-empty > span { flex: 0 0 42px; height: 46px; border: 1px solid #aebccd; background: repeating-linear-gradient(to bottom, #fff 0 8px, #d5deea 8px 10px); }
.textpart-inspector-empty strong,
.textpart-inspector-empty small { display: block; }
.textpart-inspector-empty strong { font-size: .78rem; }
.textpart-inspector-empty small { margin-top: .12rem; color: #75839a; font-size: .67rem; line-height: 1.35; }

.textpart-type-badge { flex: 0 0 auto; padding: .3rem .55rem; border-radius: 999px; background: #e8f1fc; color: #34628f; font-size: .62rem; font-weight: 700; }
.textpart-type-badge[data-type="headerFooter"] { background: #fff0f7; color: #b70b69; }
.textpart-type-badge[data-type="textFrame"] { background: #f0ecfc; color: #6542be; }

.textpart-flow-visual { position: relative; height: 102px; margin-bottom: .75rem; overflow: hidden; border: 1px solid #dbe3ee; background: #eff4f9; }
.textpart-flow-page { position: absolute; inset: 10px 25% 25px; border: 1px solid #aebccd; background: #fff; }
.textpart-flow-page i { display: block; width: 62%; height: 3px; margin: 9px 10px 0; background: #c2cedc; }
.textpart-flow-page i:nth-child(2) { width: 44%; }
.textpart-flow-page i:nth-child(3) { width: 70%; }
.textpart-flow-page i:nth-child(4) { width: 52%; }
.textpart-flow-visual > b { position: absolute; display: none; }
.textpart-flow-visual[data-textpart-visual="headerFooter"] .textpart-flow-page { border-top: 5px solid #ec168c; }
.textpart-flow-visual[data-textpart-visual="textFrame"] > b { top: 27px; right: 30%; display: block; width: 75px; height: 43px; border: 2px solid #805cda; background: #f4f0fd; box-shadow: 0 5px 12px rgba(45, 52, 74, .12); }
.textpart-flow-visual small { position: absolute; right: .5rem; bottom: .3rem; left: .5rem; overflow: hidden; color: #75839a; font-size: .59rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.textpart-property-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid #dbe3ee; border-radius: 7px; }
.textpart-property-grid > div { min-width: 0; padding: .5rem .6rem; border-right: 1px solid #dbe3ee; border-bottom: 1px solid #dbe3ee; }
.textpart-property-grid > div:nth-child(2n) { border-right: 0; }
.textpart-property-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.textpart-property-grid span,
.textpart-property-grid strong { display: block; }
.textpart-property-grid span { color: #75839a; font-size: .6rem; }
.textpart-property-grid strong { overflow: hidden; margin-top: .1rem; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }

.textpart-selection-state { display: flex; justify-content: space-between; gap: .5rem; margin-top: .65rem; padding: .5rem .6rem; border-radius: 6px; background: #f1f5fa; font-size: .65rem; }
.textpart-selection-state span { color: #75839a; }
.textpart-marker-control { display: grid; gap: .55rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #e1e7ef; }
.textpart-marker-control .demo-text-input { margin-top: .25rem; }
.textpart-marker-control > small { color: #75839a; font-size: .62rem; line-height: 1.35; }

@media (max-width: 520px) {
    .textpart-type-summary { grid-template-columns: 1fr; }
    .textpart-type-summary span { border-right: 0; border-bottom: 1px solid #d9e1ec; }
    .textpart-type-summary span:last-child { border-bottom: 0; }
    .textpart-map-region--frame { right: 22px; width: 52%; }
}