.document-design-editor {
    display: grid;
    gap: 1.5rem;
}

.document-design-editor__header {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(13, 39, 80, 0.08);
}

.document-design-editor__grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 320px;
    gap: 1rem;
    align-items: start;
}

.document-design-editor__panel {
    background: linear-gradient(180deg, rgba(248, 250, 253, 0.96), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(23, 73, 144, 0.14);
    border-radius: 20px;
    padding: 1rem;
    box-shadow: 0 18px 32px rgba(12, 39, 87, 0.06);
}

.document-design-editor__panel-title {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1f4a85;
    margin-bottom: 0.85rem;
}

.document-design-palette {
    display: grid;
    gap: 0.6rem;
}

.document-design-editor [data-inspector-field].d-none {
    display: none !important;
}

.document-design-helper {
    display: grid;
    gap: 0.5rem;
}

.document-design-helper__title {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #60748f;
}

.document-design-helper__chips,
.document-design-helper__field-picks {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.document-design-helper__picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.document-design-helper__chip,
.document-design-helper__field {
    border: 1px solid rgba(23, 70, 135, 0.14);
    background: rgba(247, 250, 255, 0.95);
    color: #18447a;
    border-radius: 999px;
    padding: 0.36rem 0.72rem;
    font-size: 0.8rem;
    line-height: 1.2;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.document-design-helper__chip:hover,
.document-design-helper__field:hover {
    background: rgba(23, 100, 212, 0.08);
    border-color: rgba(23, 100, 212, 0.3);
    color: #1764d4;
}

.document-design-field-list {
    display: grid;
    gap: 0.65rem;
    max-height: 360px;
    overflow: auto;
}

.document-design-field-list__item {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(31, 74, 133, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
}

.document-design-field-list__item span {
    color: #5b6d87;
    font-size: 0.82rem;
}

.document-design-canvas {
    display: grid;
    gap: 0.75rem;
    min-height: 480px;
}

.document-design-canvas__block {
    display: grid;
    gap: 0.35rem;
    text-align: left;
    width: 100%;
    padding: 1rem 1.05rem;
    border-radius: 16px;
    border: 1px solid rgba(24, 64, 121, 0.14);
    background: #fff;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    cursor: grab;
}

.document-design-canvas__block:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(18, 54, 112, 0.08);
}

.document-design-canvas__block.is-dragging {
    opacity: 0.62;
    cursor: grabbing;
}

.document-design-canvas__block.is-drop-target {
    border-color: #1764d4;
    box-shadow: 0 0 0 3px rgba(23, 100, 212, 0.12);
}

.document-design-canvas__block.is-selected {
    border-color: #1764d4;
    box-shadow: 0 0 0 3px rgba(23, 100, 212, 0.12);
}

.document-design-canvas__meta {
    color: #587090;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.document-design-canvas__text {
    color: #62758f;
    font-size: 0.9rem;
}

.document-design-canvas__badges {
    color: #1f5ab5;
    font-size: 0.78rem;
    font-weight: 600;
}

.document-design-editor__preview-wrap {
    border-top: 1px solid rgba(13, 39, 80, 0.08);
    padding-top: 1.25rem;
}

.document-design-preview {
    padding: 1rem 0;
}

.document-design-preview__page {
    width: min(100%, 840px);
    min-height: 900px;
    margin: 0 auto;
    padding: 2.5rem 2.2rem;
    border-radius: 20px;
    border: 1px solid rgba(16, 54, 109, 0.12);
    background:
        linear-gradient(180deg, rgba(248, 251, 255, 0.92), rgba(255, 255, 255, 1)),
        radial-gradient(circle at top right, rgba(33, 116, 221, 0.06), transparent 28%);
    box-shadow: 0 18px 48px rgba(18, 54, 112, 0.08);
}

.document-design-preview__heading {
    font-size: 1.55rem;
    font-weight: 700;
    color: #163a72;
    margin-bottom: 1rem;
}

.document-design-preview__heading--center {
    text-align: center;
}

.document-design-preview__heading--right {
    text-align: right;
}

.document-design-preview__paragraph {
    margin-bottom: 0.95rem;
    color: #27415f;
    line-height: 1.7;
}

.document-design-preview__field {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px dashed rgba(36, 79, 142, 0.18);
    color: #27415f;
}

.document-design-preview__field strong {
    color: #173f79;
    font-weight: 600;
}

.document-design-preview__group {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(23, 70, 135, 0.12);
    border-radius: 16px;
    background: rgba(248, 251, 255, 0.72);
}

.document-design-preview__section {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem 1.15rem;
    border: 1px solid rgba(23, 70, 135, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(245, 249, 255, 0.96), rgba(255, 255, 255, 0.98));
}

.document-design-preview__section-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.55rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(23, 70, 135, 0.1);
}

.document-design-preview__section-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #173f79;
}

.document-design-preview__section-text {
    margin: 0;
    color: #405977;
    line-height: 1.65;
}

.document-design-preview__group-title {
    font-weight: 700;
    color: #173f79;
}

.document-design-preview__condition {
    color: #6a7b91;
    font-size: 0.82rem;
}

.document-design-preview__group-item {
    display: grid;
    gap: 0.2rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(23, 70, 135, 0.08);
}

.document-design-preview__group-item strong {
    color: #173f79;
}

.document-design-preview__group--cols-2,
.document-design-preview__group--cols-3,
.document-design-preview__group--cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.document-design-preview__table-wrap {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(23, 70, 135, 0.12);
    border-radius: 16px;
    background: rgba(248, 251, 255, 0.72);
}

.document-design-preview__table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.75rem;
}

.document-design-preview__table th,
.document-design-preview__table td {
    border: 1px solid rgba(23, 70, 135, 0.12);
    padding: 0.7rem 0.75rem;
    text-align: left;
}

.document-design-preview__table th {
    background: rgba(23, 70, 135, 0.08);
    color: #173f79;
}

.document-design-preview__divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(23, 70, 135, 0), rgba(23, 70, 135, 0.4), rgba(23, 70, 135, 0));
    margin: 1rem 0;
}

.document-design-preview__checklist {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
    color: #27415f;
}

.document-design-preview__checkbox {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(23, 70, 135, 0.28);
    background: white;
}

.document-design-preview__signature {
    margin-top: 2rem;
    width: 280px;
    color: #27415f;
}

.document-design-preview__signature-line {
    margin-top: 2.4rem;
    border-bottom: 1px solid rgba(23, 70, 135, 0.36);
}

@media (max-width: 1400px) {
    .document-design-editor__grid {
        grid-template-columns: 220px minmax(0, 1fr) 280px;
    }
}

@media (min-width: 768px) {
    .document-design-preview__group--cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .document-design-preview__group--cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .document-design-preview__group--cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .document-design-editor__grid {
        grid-template-columns: 1fr;
    }

    .document-design-canvas {
        min-height: 320px;
    }
}


/* Document design workspace */
.document-design-workspace {
        gap: 1rem;
    }

    .document-design-shell__body {
        padding: 1rem;
    }

    .document-design-toolbar {
        border-radius: 0.9rem;
        padding: 0.75rem 0.9rem;
    }

    .document-design-toolbar__summary {
        padding-left: 0.1rem;
    }

    .document-design-toolbar__text strong {
        font-size: 1.02rem;
    }

    .document-design-toolbar__stat {
        padding: 0.56rem 0.82rem;
    }

    .document-design-toolbar__icon,
    .document-design-toolbar__device {
        width: 2.55rem;
        height: 2.55rem;
        border-radius: 0.72rem;
        font-size: 0;
    }

    .document-design-toolbar__icon::before,
    .document-design-toolbar__device::before {
        font-size: 0.92rem;
        font-weight: 700;
    }

    .document-design-shell__actions > .document-design-toolbar__icon:nth-child(1)::before {
        content: "UN";
    }

    .document-design-shell__actions > .document-design-toolbar__icon:nth-child(2)::before {
        content: "RE";
    }

    .document-design-shell__actions > .document-design-toolbar__device:nth-child(3)::before {
        content: "PC";
    }

    .document-design-shell__actions > .document-design-toolbar__device:nth-child(4)::before {
        content: "TB";
    }

    .document-design-shell__actions > .document-design-toolbar__device:nth-child(5)::before {
        content: "MB";
    }

    .document-design-toolbar__zoom {
        padding: 0.68rem 0.9rem;
        border-radius: 0.72rem;
    }

    .document-design-layout {
        border-radius: 1rem;
    }

    .document-design-rail {
        padding: 0.8rem 0.5rem;
    }

    .document-design-column__header {
        padding: 1rem 1.05rem 0.85rem;
    }

    .document-design-column__body {
        padding: 0.95rem 1rem 1rem;
    }

    .document-design-search {
        font-size: 0.92rem;
    }

    .document-design-palette-grid {
        gap: 0.62rem;
    }

    .document-design-palette-card {
        min-height: 3.15rem;
        padding-top: 0.78rem;
        padding-bottom: 0.78rem;
    }

    .document-design-palette-card::before {
        width: 1.55rem;
        font-size: 0.95rem;
    }

    .document-design-palette-card strong {
        margin-bottom: 0.08rem;
    }

    .document-design-field-list {
        gap: 0.55rem;
        max-height: 18rem;
    }

    .document-design-field-list__item {
        padding: 0.7rem 0.82rem;
        border-radius: 0.8rem;
    }

    .document-design-stage {
        gap: 0.75rem;
    }

    .document-design-stage__top .form-control,
    .document-design-stage__top .form-select {
        min-height: 2.65rem;
        border-radius: 0.8rem;
    }

    .document-design-stage__paper-shell {
        padding: 0.85rem;
        position: relative;
    }

    .document-design-stage__paper-shell::before {
        content: "A4  210 x 297 mm";
        position: absolute;
        top: -1.55rem;
        left: 0.15rem;
        color: #6b7f99;
        font-size: 0.82rem;
        font-weight: 600;
    }

    .document-design-preview {
        min-height: 1040px;
        padding: 0.35rem;
    }

    .document-design-preview__page {
        min-height: 1040px;
        padding: 2.4rem 2.55rem 3.5rem;
        margin: 0 auto;
        background: #fff;
    }

    .document-design-preview__node {
        border-radius: 0.4rem;
        padding: 0.22rem;
        position: relative;
    }

    .document-design-preview__node.is-selected {
        background: rgba(239, 246, 255, 0.48);
    }

    .document-design-preview__node.is-selected::after {
        content: "";
        position: absolute;
        top: calc(50% - 0.28rem);
        left: -0.42rem;
        width: 0.56rem;
        height: 0.56rem;
        border-radius: 0.16rem;
        background: #2563eb;
        box-shadow: 0 0 0 2px #dbeafe;
    }

    .document-design-preview__heading {
        margin-bottom: 1.1rem;
        font-size: 1.85rem;
    }

    .document-design-preview__paragraph,
    .document-design-preview__section-text,
    .document-design-preview__condition,
    .document-design-preview__checklist,
    .document-design-preview__signature {
        color: #334155;
        line-height: 1.62;
    }

    .document-design-preview__field,
    .document-design-preview__group-item {
        display: grid;
        grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr);
        gap: 1rem;
        padding: 0.62rem 0.8rem;
        border-bottom: 1px dashed rgba(148, 163, 184, 0.34);
    }

    .document-design-preview__field span,
    .document-design-preview__group-item span {
        color: #1f3557;
        font-weight: 600;
    }

    .document-design-preview__field strong,
    .document-design-preview__group-item strong {
        color: #475569;
        font-weight: 600;
    }

    .document-design-preview__group,
    .document-design-preview__section,
    .document-design-preview__table-wrap {
        margin-bottom: 1rem;
        border: 1px solid rgba(191, 219, 254, 0.9);
        border-radius: 0.55rem;
        overflow: hidden;
    }

    .document-design-preview__group-title,
    .document-design-preview__section-header {
        padding: 0.7rem 0.82rem;
        background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
        border-bottom: 1px solid rgba(191, 219, 254, 0.9);
        color: #163778;
        font-weight: 800;
    }

    .document-design-preview__section-header h3 {
        margin: 0;
        font-size: 1rem;
    }

    .document-design-preview__section-text {
        padding: 0.9rem;
        margin: 0;
    }

    .document-design-preview__table {
        width: 100%;
        border-collapse: collapse;
    }

    .document-design-preview__table th,
    .document-design-preview__table td {
        border: 1px solid rgba(191, 219, 254, 0.75);
        padding: 0.64rem 0.58rem;
        font-size: 0.86rem;
    }

    .document-design-preview__table th {
        background: #f8fbff;
        color: #1f3557;
        font-weight: 800;
    }

    .document-design-preview__divider {
        margin: 1rem 0;
        border-top: 1px solid rgba(148, 163, 184, 0.55);
    }

    .document-design-preview__signature {
        padding-top: 1rem;
    }

    .document-design-preview__signature-line {
        margin-top: 0.8rem;
        width: 14rem;
        border-top: 1px solid #64748b;
    }

    .document-design-stage__flow {
        padding: 0.85rem;
    }

    .document-design-canvas {
        max-height: 12rem;
    }

    .document-design-canvas__block {
        border-radius: 0.78rem;
        padding: 0.82rem 0.9rem;
    }

    .document-design-form-stack {
        gap: 0.82rem;
    }

    .document-design-form-stack .form-control,
    .document-design-form-stack .form-select,
    .document-design-stage__top .form-control {
        font-size: 0.92rem;
    }

    .document-design-helper {
        border-radius: 0.82rem;
        padding: 0.72rem;
    }


/* Document design workspace refinements */
.document-design-shell {
        border-radius: 0;
        border: 1px solid rgba(208, 216, 230, 0.9);
        background: #f4f7fb;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    }

    .document-design-shell__topbar {
        padding: 1rem 1.35rem;
        background: #fff;
        color: #0f172a;
        border-bottom: 1px solid #dbe4f0;
    }

    .document-design-shell__back {
        width: 2.35rem;
        height: 2.35rem;
        border-radius: 0.85rem;
        border: 1px solid #d7e3f4;
        background: #fff;
        color: #2563eb;
        font-weight: 700;
    }

    .document-design-shell__eyebrow,
    .document-design-shell__meta {
        color: #64748b;
    }

    .document-design-shell__heading {
        font-size: 1.35rem;
    }

    .document-design-shell__draft {
        background: #e8f7ee;
        color: #15803d;
    }

    .document-design-shell__actions {
        gap: 0.65rem;
    }

    .document-design-toolbar {
        grid-template-columns: minmax(18rem, 1fr) auto auto;
        background: #fff;
        border: 1px solid #dbe4f0;
        border-radius: 0.9rem;
        padding: 0.75rem 0.9rem;
    }

    .document-design-toolbar__summary {
        gap: 1rem;
    }

    .document-design-toolbar__badge {
        min-width: 2.8rem;
        height: 2.8rem;
        border-radius: 0.9rem;
        background: linear-gradient(135deg, #e0ecff 0%, #f8fbff 100%);
    }

    .document-design-toolbar__stats {
        justify-content: flex-start;
        gap: 0.55rem;
    }

    .document-design-toolbar__stat {
        min-width: auto;
        border-radius: 0.85rem;
        padding: 0.6rem 0.85rem;
    }

    .document-design-toolbar__cta {
        align-items: center;
    }

    .document-design-toolbar__icon,
    .document-design-toolbar__device {
        width: 2.55rem;
        height: 2.55rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #d7e3f4;
        border-radius: 0.72rem;
        background: #fff;
        color: #1e3a8a;
        font-size: 1rem;
    }

    .document-design-toolbar__icon,
    .document-design-toolbar__device {
        font-size: 0;
    }

    .document-design-toolbar__icon::before,
    .document-design-toolbar__device::before {
        font-size: 0.92rem;
        font-weight: 700;
    }

    .document-design-shell__actions > .document-design-toolbar__icon:nth-child(1)::before {
        content: "U";
    }

    .document-design-shell__actions > .document-design-toolbar__icon:nth-child(2)::before {
        content: "R";
    }

    .document-design-shell__actions > .document-design-toolbar__device:nth-child(3)::before {
        content: "D";
    }

    .document-design-shell__actions > .document-design-toolbar__device:nth-child(4)::before {
        content: "T";
    }

    .document-design-shell__actions > .document-design-toolbar__device:nth-child(5)::before {
        content: "M";
    }

    .document-design-toolbar__device.is-active {
        background: #eff6ff;
        border-color: #93c5fd;
    }

    .document-design-toolbar__zoom {
        min-width: 5.5rem;
        padding: 0.68rem 0.9rem;
        border: 1px solid #d7e3f4;
        border-radius: 0.72rem;
        background: #fff;
        color: #1e293b;
    }

.document-design-layout {
        grid-template-columns: 3.5rem 17.5rem minmax(0, 1fr) 20rem;
        gap: 0;
        border: 1px solid #dbe4f0;
        border-radius: 1rem;
        overflow: hidden;
        background: #fff;
    }

    .document-design-workspace--simple .document-design-layout {
        grid-template-columns: 17.5rem minmax(0, 1fr) 20rem;
    }

    .document-design-workspace--simple .document-design-toolbar {
        grid-template-columns: minmax(0, 1fr) 18rem;
    }

    .document-design-workspace--simple .document-design-toolbar__text {
        display: grid;
        gap: 0.15rem;
    }

    .document-design-workspace--simple .document-design-toolbar__text span {
        color: #64748b;
        font-size: 0.86rem;
    }

    .document-design-workspace--simple .document-design-shell__body {
        padding: 0.7rem;
    }

    .document-design-workspace--simple .document-design-column__header {
        padding: 0.72rem 0.82rem;
    }

    .document-design-workspace--simple .document-design-column__hint,
    .document-design-workspace--simple .document-design-palette-card span span {
        display: none;
    }

    .document-design-workspace--simple .document-design-column__body {
        padding: 0.72rem 0.82rem;
    }

    .document-design-workspace--simple .document-design-palette-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.42rem;
    }

    .document-design-workspace--simple .document-design-palette-card {
        min-height: 2.45rem;
        padding: 0.5rem 0.6rem;
        font-size: 0.84rem;
        gap: 0.35rem;
    }

    .document-design-workspace--simple .document-design-palette-card::before {
        width: auto;
        font-size: 0.7rem;
    }

    .document-design-workspace--simple .document-design-palette-card strong {
        font-size: 0.76rem;
        line-height: 1.15;
    }

    .document-design-workspace--simple .document-design-stage {
        gap: 0.55rem;
    }

    .document-design-workspace--simple .document-design-stage__paper-shell {
        max-height: 38rem;
        overflow: auto;
        padding: 0.55rem;
    }

    .document-design-workspace--simple .document-design-preview,
    .document-design-workspace--simple .document-design-preview__page {
        min-height: 36rem;
    }

    .document-design-workspace--simple .document-design-preview__page {
        padding: 1.5rem 1.7rem 2rem;
    }

    .document-design-workspace--simple .document-design-stage__flow {
        padding: 0.6rem;
    }

    .document-design-flow-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.35rem;
        margin-bottom: 0.55rem;
        padding: 0.25rem;
        border: 1px solid #dbe4f0;
        border-radius: 0.55rem;
        background: #f8fafc;
    }

    .document-design-flow-tabs button {
        border: 0;
        border-radius: 0.4rem;
        padding: 0.38rem;
        background: transparent;
        color: #52667f;
        font-size: 0.76rem;
        font-weight: 700;
    }

    .document-design-flow-tabs button.is-active {
        background: #fff;
        color: #1d4ed8;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    }

    .document-design-canvas__empty {
        padding: 0.8rem;
        color: #64748b;
        font-size: 0.82rem;
        text-align: center;
    }

    .document-design-workspace--simple .document-design-canvas {
        max-height: 8.5rem;
    }

    .document-design-workspace--simple .document-design-canvas__block {
        padding: 0.58rem 0.68rem;
    }

    .document-design-workspace--simple .document-design-form-stack {
        gap: 0.58rem;
    }

    .document-design-workspace--simple .document-design-helper,
    .document-design-workspace--simple .document-design-actions {
        padding-top: 0.45rem;
    }

    .document-design-rail {
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border-right: 1px solid #dbe4f0;
        padding: 1rem 0.55rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }

    .document-design-rail__item {
        width: 2.35rem;
        height: 2.35rem;
        border-radius: 0.8rem;
        border: 1px solid transparent;
        background: transparent;
        color: #57708f;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
        position: relative;
    }

    .document-design-rail__item::before {
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        color: currentColor;
    }

    .document-design-rail__item:nth-child(1)::before {
        content: "LY";
    }

    .document-design-rail__item:nth-child(2)::before {
        content: "HM";
    }

    .document-design-rail__item:nth-child(3)::before {
        content: "FV";
    }

    .document-design-rail__item:nth-child(4)::before {
        content: "CP";
    }

    .document-design-rail__item:nth-child(5)::before {
        content: "ST";
    }

    .document-design-rail__item:nth-child(6)::before {
        content: "SW";
    }

    .document-design-rail__item.is-active {
        background: #eef4ff;
        border-color: #bfdbfe;
        color: #2563eb;
    }

    .document-design-column {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #fff;
        min-height: 100%;
    }

    .document-design-column + .document-design-column {
        border-left: 1px solid #dbe4f0;
    }

    .document-design-column__header {
        padding: 1.15rem 1.2rem 0.95rem;
        background: #fff;
    }

    .document-design-column__title {
        font-size: 0.9rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .document-design-search {
        min-height: 2.7rem;
        margin-bottom: 1.2rem;
        background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
        color: #7c8ea8;
    }

    .document-design-palette-card {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        min-height: 3.45rem;
        border-radius: 0.85rem;
        box-shadow: none;
    }

    .document-design-palette-card::before {
        content: attr(data-icon);
        width: 1.8rem;
        color: #33517e;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        flex: 0 0 auto;
    }

    .document-design-palette-card > span {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .document-design-palette-grid > .document-design-palette-card:nth-child(1)::before {
        content: "H";
    }

    .document-design-palette-grid > .document-design-palette-card:nth-child(2)::before {
        content: "P";
    }

    .document-design-palette-grid > .document-design-palette-card:nth-child(3)::before {
        content: "FLD";
    }

    .document-design-palette-grid > .document-design-palette-card:nth-child(4)::before {
        content: "GRP";
    }

    .document-design-palette-grid > .document-design-palette-card:nth-child(5)::before {
        content: "SEC";
    }

    .document-design-palette-grid > .document-design-palette-card:nth-child(6)::before {
        content: "TBL";
    }

    .document-design-palette-grid > .document-design-palette-card:nth-child(7)::before {
        content: "SGN";
    }

    .document-design-palette-grid > .document-design-palette-card:nth-child(8)::before {
        content: "DIV";
    }

    .document-design-column__hint {
        color: #6b7f99;
        font-size: 0.82rem;
    }

    .document-design-form-stack .form-label {
        color: #284063;
        font-size: 0.84rem;
        font-weight: 700;
        letter-spacing: 0.01em;
    }

    .document-design-stage__paper-shell {
        padding: 1rem;
        background: linear-gradient(180deg, #eef4ff 0%, #f7faff 100%);
        border-radius: 1.2rem;
        position: relative;
    }

    .document-design-stage__paper-shell::before {
        content: "A4  210 x 297 mm";
        position: absolute;
        top: -1.55rem;
        left: 0.15rem;
        color: #6b7f99;
        font-size: 0.82rem;
        font-weight: 600;
    }

    .document-design-preview {
        min-height: 1080px;
        border-radius: 0.9rem;
        background:
            linear-gradient(90deg, transparent calc(50% - 1px), rgba(59, 130, 246, 0.16) calc(50% - 1px), rgba(59, 130, 246, 0.16) calc(50% + 1px), transparent calc(50% + 1px)),
            linear-gradient(180deg, transparent 155px, rgba(59, 130, 246, 0.16) 155px, rgba(59, 130, 246, 0.16) 157px, transparent 157px),
            #fff;
        background-size: 100% 100%, 100% 100%, 100% 100%;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
        padding: 0.35rem;
    }

    .document-design-preview__page {
        width: min(100%, 820px);
        min-height: 1080px;
        padding: 2.75rem 2.9rem 4rem;
        margin: 0 auto;
        background: #fff;
    }

    .document-design-preview__node {
        width: 100%;
        display: block;
        background: transparent;
        border: 1px dashed transparent;
        border-radius: 0.4rem;
        padding: 0.22rem;
        text-align: left;
        position: relative;
    }

    .document-design-preview__node.is-selected {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
        background: rgba(239, 246, 255, 0.48);
    }

    .document-design-preview__node.is-selected::after {
        content: "";
        position: absolute;
        top: calc(50% - 0.28rem);
        left: -0.42rem;
        width: 0.56rem;
        height: 0.56rem;
        border-radius: 0.16rem;
        background: #2563eb;
        box-shadow: 0 0 0 2px #dbeafe;
    }

    .document-design-stage__flow {
        border-radius: 1rem;
        margin-top: 0.2rem;
    }

    .document-design-canvas {
        grid-template-columns: 1fr;
        max-height: 14rem;
        overflow: auto;
    }

    .document-design-canvas__block {
        border-radius: 0.85rem;
    }

    .document-design-preview__heading {
        margin-bottom: 1.35rem;
        color: #163778;
        font-size: 2rem;
        font-weight: 800;
    }

    .document-design-preview__paragraph,
    .document-design-preview__section-text,
    .document-design-preview__condition,
    .document-design-preview__checklist,
    .document-design-preview__signature {
        color: #334155;
        line-height: 1.62;
    }

    .document-design-preview__field,
    .document-design-preview__group-item {
        display: grid;
        grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr);
        gap: 1rem;
        padding: 0.7rem 0.85rem;
        border-bottom: 1px dashed rgba(148, 163, 184, 0.34);
    }

    .document-design-preview__field span,
    .document-design-preview__group-item span {
        color: #1f3557;
        font-weight: 600;
    }

    .document-design-preview__field strong,
    .document-design-preview__group-item strong {
        color: #475569;
        font-weight: 600;
    }

    .document-design-preview__group,
    .document-design-preview__section,
    .document-design-preview__table-wrap {
        margin-bottom: 1.2rem;
        border: 1px solid rgba(191, 219, 254, 0.9);
        border-radius: 0.55rem;
        overflow: hidden;
    }

    .document-design-preview__group-title,
    .document-design-preview__section-header {
        padding: 0.8rem 0.9rem;
        background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
        border-bottom: 1px solid rgba(191, 219, 254, 0.9);
        color: #163778;
        font-weight: 800;
    }

    .document-design-preview__section-header h3 {
        margin: 0;
        font-size: 1rem;
    }

    .document-design-preview__section-text {
        padding: 0.9rem;
        margin: 0;
    }

    .document-design-preview__table {
        width: 100%;
        border-collapse: collapse;
    }

    .document-design-preview__table th,
    .document-design-preview__table td {
        border: 1px solid rgba(191, 219, 254, 0.75);
        padding: 0.72rem 0.65rem;
        font-size: 0.9rem;
    }

    .document-design-preview__table th {
        background: #f8fbff;
        color: #1f3557;
        font-weight: 800;
    }

    .document-design-preview__divider {
        margin: 1rem 0;
        border-top: 1px solid rgba(148, 163, 184, 0.55);
    }

    .document-design-preview__signature {
        padding-top: 1rem;
    }

    .document-design-preview__signature-line {
        margin-top: 0.8rem;
        width: 14rem;
        border-top: 1px solid #64748b;
    }

    .document-design-form-stack .form-control,
    .document-design-form-stack .form-select,
    .document-design-stage__top .form-control {
        border-color: #d8e3f2;
        background: #fff;
    }

    .document-design-helper {
        background: #fbfdff;
    }

    .document-design-shell__topbar {
        min-height: 5.25rem;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid rgba(148, 163, 184, 0.16);
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    }

    .document-design-shell__title-wrap {
        gap: 1rem;
    }

    .document-design-shell__back {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .document-design-toolbar {
        padding: 1.1rem 1.3rem;
    }

    .document-design-toolbar__cta .form-select {
        min-width: 18rem;
        min-height: 2.9rem;
        border-radius: 0.85rem;
    }

    .document-design-stage__paper-shell {
        padding: 1.25rem;
    }

    .document-design-preview__page {
        width: min(100%, 794px);
        padding: 2.5rem 2.75rem 3.5rem;
    }

    .document-design-preview__node {
        transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .document-design-preview__node:hover {
        background: rgba(248, 250, 252, 0.92);
    }

    .document-design-canvas__block,
    .document-design-preview__node {
        position: relative;
    }

    .document-design-canvas__block.is-dragging,
    .document-design-preview__node.is-dragging {
        opacity: 0.6;
        transform: scale(0.995);
    }

    .document-design-canvas__block.is-drop-before::before,
    .document-design-canvas__block.is-drop-after::after,
    .document-design-preview__node.is-drop-before::before,
    .document-design-preview__node.is-drop-after::after {
        content: "";
        position: absolute;
        left: 0.35rem;
        right: 0.35rem;
        height: 0.2rem;
        border-radius: 999px;
        background: #2563eb;
        box-shadow: 0 0 0 3px rgba(219, 234, 254, 0.88);
        z-index: 3;
    }

    .document-design-canvas__block.is-drop-before::before,
    .document-design-preview__node.is-drop-before::before {
        top: -0.2rem;
    }

    .document-design-canvas__block.is-drop-after::after,
    .document-design-preview__node.is-drop-after::after {
        bottom: -0.2rem;
    }

    .document-design-stage__flow .document-design-column__hint::after {
        content: "  •  Onizleme veya akista tasiyabilirsiniz";
        color: #94a3b8;
        font-weight: 500;
    }

    @@media (max-width: 1400px) {
        .document-design-layout {
            grid-template-columns: 3.5rem 16rem minmax(0, 1fr);
        }

        .document-design-layout > .document-design-column:last-child {
            grid-column: 1 / -1;
            border-left: 0;
            border-top: 1px solid #dbe4f0;
        }
    }