:root {
    --mdk-panel: rgba(255, 255, 255, .94);
    --mdk-border: rgba(48, 62, 89, .12);
    --mdk-text: #182238;
    --mdk-muted: #68738a;
    --mdk-primary: #5c52ed;
    --mdk-danger: #d92d20;
    --mdk-shadow: 0 18px 50px rgba(20, 31, 51, .18);
}

html.mdk-lock-page,
html.mdk-lock-page body,
body.mdk-drawing-page {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    background: #dbe5f1 !important;
}

body.mdk-drawing-page #wpadminbar,
body.mdk-drawing-page .site-header,
body.mdk-drawing-page .site-footer,
body.mdk-drawing-page .entry-header,
body.mdk-drawing-page .entry-footer,
body.mdk-drawing-page .comments-area,
body.mdk-drawing-page #comments,
body.mdk-drawing-page .comment-respond,
body.mdk-drawing-page .post-navigation,
body.mdk-drawing-page .page-links,
body.mdk-drawing-page .pagination,
body.mdk-drawing-page .wp-block-post-title,
body.mdk-drawing-page .entry-title {
    display: none !important;
}

body.mdk-drawing-page .site,
body.mdk-drawing-page #page,
body.mdk-drawing-page #content,
body.mdk-drawing-page .site-content,
body.mdk-drawing-page .content-area,
body.mdk-drawing-page main,
body.mdk-drawing-page article,
body.mdk-drawing-page .entry-content,
body.mdk-drawing-page .wp-block-post-content,
body.mdk-drawing-page .post-content {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

body.mdk-drawing-page .mdk-page-shell {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147480000 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #dbe5f1;
}

.mdk-studio,
.mdk-studio * {
    box-sizing: border-box;
}

.mdk-studio {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--mdk-text);
    background:
        radial-gradient(circle at 15% 10%, rgba(137, 164, 213, .22), transparent 28%),
        radial-gradient(circle at 85% 90%, rgba(120, 106, 235, .13), transparent 30%),
        #dfe8f3;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    touch-action: none;
    user-select: none;
}

.mdk-canvas-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
    touch-action: none;
}

.mdk-canvas-surface {
    position: absolute;
    left: 50%;
    top: 50%;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 12px 38px rgba(32, 45, 68, .17), 0 0 0 1px rgba(42, 57, 82, .15);
    transform-origin: center center;
    will-change: transform;
}

.mdk-layer,
.mdk-layers-host,
.mdk-layers-host canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mdk-background-canvas { z-index: 1; }
.mdk-reference-canvas { z-index: 2; pointer-events: none; }
.mdk-layers-host { z-index: 3; pointer-events: none; }
.mdk-guides-canvas { z-index: 5; pointer-events: none; }
.mdk-interaction-canvas {
    z-index: 6;
    touch-action: none;
    cursor: crosshair;
}

.mdk-brush-cursor {
    position: absolute;
    z-index: 12;
    width: 12px;
    height: 12px;
    border: 1.5px solid rgba(255, 255, 255, .96);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .85), 0 2px 7px rgba(0, 0, 0, .2);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
}

.mdk-transform-box {
    position: absolute;
    z-index: 11;
    border: 1.5px dashed #5b52ea;
    background: rgba(91, 82, 234, .04);
    transform-origin: center center;
    pointer-events: auto;
}

.mdk-transform-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #5b52ea;
    box-shadow: 0 2px 8px rgba(22, 34, 57, .22);
    cursor: nwse-resize;
}

.mdk-handle-nw { left: 0; top: 0; }
.mdk-handle-ne { right: 0; top: 0; cursor: nesw-resize; }
.mdk-handle-sw { left: 0; bottom: 0; cursor: nesw-resize; }
.mdk-handle-se { right: 0; bottom: 0; }

.mdk-transform-rotate {
    position: absolute;
    left: 50%;
    top: -38px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    transform: translateX(-50%);
    border: 2px solid #fff;
    border-radius: 50%;
    background: #5b52ea;
    color: #fff;
    box-shadow: 0 3px 10px rgba(22, 34, 57, .22);
    cursor: grab;
}

.mdk-transform-rotate .mdk-icon { width: 17px; height: 17px; }

.mdk-dock {
    position: absolute;
    z-index: 40;
    display: flex;
    gap: 7px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 20px;
    background: rgba(250, 252, 255, .82);
    backdrop-filter: blur(18px) saturate(1.12);
    box-shadow: 0 12px 34px rgba(29, 43, 66, .16);
    scrollbar-width: none;
}

.mdk-dock::-webkit-scrollbar { display: none; }

.mdk-tools-dock {
    left: 10px;
    top: 50%;
    max-height: calc(100% - 20px);
    transform: translateY(-50%);
    flex-direction: column;
    overflow-y: auto;
}

.mdk-actions-dock {
    right: 10px;
    top: 50%;
    max-height: calc(100% - 20px);
    transform: translateY(-50%);
    flex-direction: column;
    overflow-y: auto;
}

.mdk-icon-button {
    position: relative;
    flex: 0 0 auto;
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    color: #3b4862;
    box-shadow: inset 0 0 0 1px rgba(54, 68, 94, .11);
    cursor: pointer;
    transition: transform .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease;
}

.mdk-icon-button:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: inset 0 0 0 1px rgba(78, 70, 229, .2), 0 5px 13px rgba(32, 43, 65, .11);
}

.mdk-icon-button:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
}

.mdk-icon-button.is-active {
    background: linear-gradient(145deg, #6559f2, #4e46d6);
    color: #fff;
    box-shadow: 0 7px 17px rgba(78, 70, 214, .27);
}

.mdk-icon-button .mdk-icon { width: 22px; height: 22px; }
.mdk-icon-button.tool-indigo:not(.is-active) { color: #4f46e5; }
.mdk-icon-button.tool-slate:not(.is-active) { color: #475569; }
.mdk-icon-button.tool-amber:not(.is-active) { color: #d97706; }
.mdk-icon-button.tool-cyan:not(.is-active) { color: #0891b2; }
.mdk-icon-button.tool-blue:not(.is-active) { color: #2563eb; }
.mdk-icon-button.tool-stone:not(.is-active) { color: #57534e; }
.mdk-icon-button.tool-violet:not(.is-active) { color: #7c3aed; }
.mdk-icon-button.tool-yellow:not(.is-active) { color: #ca8a04; }
.mdk-icon-button.tool-rose:not(.is-active) { color: #e11d48; }
.mdk-icon-button.tool-pink:not(.is-active) { color: #db2777; }
.mdk-icon-button.tool-sky:not(.is-active) { color: #0284c7; }
.mdk-icon-button.tool-lime:not(.is-active) { color: #65a30d; }
.mdk-icon-button.tool-orange:not(.is-active) { color: #ea580c; }
.mdk-icon-button.tool-emerald:not(.is-active) { color: #059669; }
.mdk-icon-button.tool-teal:not(.is-active) { color: #0d9488; }
.mdk-icon-button.tool-fuchsia:not(.is-active) { color: #c026d3; }
.mdk-icon-button.tool-purple:not(.is-active) { color: #9333ea; }

.mdk-icon-button::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 11px);
    top: 50%;
    transform: translateY(-50%);
    max-width: 190px;
    padding: 7px 10px;
    border-radius: 9px;
    background: rgba(20, 29, 47, .94);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    transition: opacity .14s ease;
}

.mdk-actions-dock .mdk-icon-button::after {
    left: auto;
    right: calc(100% + 11px);
}

.mdk-icon-button:hover::after { opacity: 1; }

.mdk-panel {
    position: absolute;
    z-index: 70;
    top: 10px;
    right: 70px;
    width: min(330px, calc(100vw - 150px));
    max-height: calc(100% - 20px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 23px;
    background: var(--mdk-panel);
    backdrop-filter: blur(22px) saturate(1.08);
    box-shadow: var(--mdk-shadow);
}

.mdk-panel-wide { width: min(420px, calc(100vw - 150px)); }
.mdk-panel[hidden] { display: none !important; }

.mdk-panel-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 16px 13px;
    border-bottom: 1px solid var(--mdk-border);
    background: transparent !important;
}

.mdk-panel-header > div { min-width: 0; }
.mdk-panel-header strong { display: block; font-size: 15px; line-height: 1.2; }
.mdk-panel-header span { display: block; margin-top: 3px; color: var(--mdk-muted); font-size: 11px; line-height: 1.35; }

.mdk-panel-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: #eef1f8;
    color: #46526b;
    cursor: pointer;
}

.mdk-panel-close .mdk-icon { width: 18px; height: 18px; }

.mdk-panel-content {
    max-height: calc(100dvh - 82px);
    overflow: auto;
    padding: 14px 15px 17px;
    scrollbar-width: thin;
    scrollbar-color: #c8cfdd transparent;
}

.mdk-panel-content > * + * { margin-top: 13px; }

.mdk-panel label,
.mdk-mini-title {
    color: #35425d;
    font-size: 12px;
    font-weight: 760;
}

.mdk-panel input[type="text"],
.mdk-panel input[type="number"],
.mdk-panel select {
    width: 100%;
    min-height: 40px;
    margin-top: 6px;
    padding: 0 11px;
    border: 1px solid #dbe0ea;
    border-radius: 11px;
    outline: none;
    background: #fff;
    color: #26334c;
    font: inherit;
    font-size: 12px;
}

.mdk-panel input:focus,
.mdk-panel select:focus { border-color: #8278f0; box-shadow: 0 0 0 3px rgba(92, 82, 237, .11); }

.mdk-range-field {
    display: block;
    padding: 11px 12px;
    border-radius: 14px;
    background: #f7f9fc;
    box-shadow: inset 0 0 0 1px rgba(54, 68, 94, .07);
}

.mdk-range-field > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.mdk-range-field output { color: #68738a; font-size: 11px; font-weight: 700; }
.mdk-range-field input[type="range"] { width: 100%; margin: 0; accent-color: var(--mdk-primary); }

.mdk-switch-list {
    display: grid;
    gap: 8px;
    padding: 11px 12px;
    border-radius: 14px;
    background: #f7f9fc;
    box-shadow: inset 0 0 0 1px rgba(54, 68, 94, .07);
}

.mdk-switch-list label {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
}

.mdk-switch-list input { accent-color: var(--mdk-primary); }

.mdk-preset-grid,
.mdk-choice-grid,
.mdk-action-grid,
.mdk-layer-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mdk-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mdk-three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mdk-compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.mdk-preset-grid button,
.mdk-choice-grid button,
.mdk-action-grid button,
.mdk-action-file,
.mdk-layer-toolbar button,
.mdk-primary-button,
.mdk-secondary-button {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #dde2ec;
    border-radius: 12px;
    background: #fff;
    color: #34415b;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 760;
    text-align: center;
}

.mdk-choice-grid button { min-height: 64px; flex-direction: column; }
.mdk-choice-grid .mdk-icon,
.mdk-action-grid .mdk-icon,
.mdk-layer-toolbar .mdk-icon,
.mdk-secondary-button .mdk-icon { width: 20px; height: 20px; }

.mdk-preset-grid button:hover,
.mdk-choice-grid button:hover,
.mdk-action-grid button:hover,
.mdk-layer-toolbar button:hover,
.mdk-secondary-button:hover { border-color: #9d95f4; background: #f6f4ff; }

.mdk-primary-button,
.mdk-action-grid .mdk-primary-button {
    border-color: transparent;
    background: linear-gradient(145deg, #6559f2, #4e46d6);
    color: #fff;
}

.mdk-action-grid .is-danger,
.mdk-layer-toolbar .is-danger,
.mdk-secondary-button.is-danger { border-color: #f2c5c1; background: #fff4f3; color: var(--mdk-danger); }

.mdk-current-color {
    display: grid;
    grid-template-columns: 58px 1fr 38px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 15px;
    background: #f7f9fc;
}

.mdk-current-color input[type="color"] {
    width: 58px;
    height: 50px;
    padding: 4px;
    border: 0;
    border-radius: 13px;
    background: #fff;
    cursor: pointer;
}

.mdk-current-color strong { display: block; font-size: 13px; }
.mdk-current-color span { display: block; margin-top: 2px; color: var(--mdk-muted); font-size: 10px; }

.mdk-square-button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #dde2ec;
    border-radius: 11px;
    background: #fff;
    color: #f59e0b;
    cursor: pointer;
}

.mdk-square-button .mdk-icon { width: 18px; height: 18px; }

.mdk-color-wheel {
    display: block;
    width: min(100%, 260px);
    height: auto;
    margin: 0 auto;
    border-radius: 50%;
    cursor: crosshair;
    box-shadow: 0 8px 25px rgba(35, 47, 69, .12);
}

.mdk-color-values {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 7px;
}

.mdk-color-values label { font-size: 9px; text-align: center; }
.mdk-color-values input { min-height: 35px !important; margin-top: 3px !important; padding: 0 5px !important; text-align: center; }

.mdk-color-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 9px;
}

.mdk-color-grid button {
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    outline: 1px solid rgba(57, 72, 99, .18);
    background: var(--swatch);
    cursor: pointer;
}

.mdk-small-colors button { max-width: 35px; }

.mdk-gradient-colors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mdk-gradient-colors label {
    display: grid;
    grid-template-columns: 1fr 42px;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border-radius: 12px;
    background: #f7f9fc;
}

.mdk-gradient-colors input[type="color"] { width: 42px; height: 34px; padding: 2px; border: 0; background: transparent; }

.mdk-layer-toolbar { grid-template-columns: repeat(4, 1fr); }
.mdk-layer-toolbar button { min-height: 52px; flex-direction: column; padding: 5px; }

.mdk-layers-list {
    display: grid;
    gap: 7px;
    max-height: 290px;
    overflow: auto;
    padding-right: 2px;
}

.mdk-layer-item {
    display: grid;
    grid-template-columns: 36px 36px 42px 1fr 24px;
    align-items: center;
    gap: 6px;
    padding: 7px;
    border: 1px solid #e0e4ed;
    border-radius: 13px;
    background: #fff;
    cursor: pointer;
}

.mdk-layer-item.is-active { border-color: #8d84ef; background: #f4f2ff; box-shadow: 0 0 0 2px rgba(92, 82, 237, .08); }
.mdk-layer-item button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: #f1f4f8; color: #4b5870; cursor: pointer; }
.mdk-layer-item button .mdk-icon { width: 17px; height: 17px; }
.mdk-layer-thumb { width: 42px; height: 32px; object-fit: contain; border: 1px solid #dfe3ec; border-radius: 7px; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 50% / 10px 10px; }
.mdk-layer-copy { min-width: 0; }
.mdk-layer-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.mdk-layer-copy span { display: block; margin-top: 2px; color: var(--mdk-muted); font-size: 9px; }
.mdk-layer-grip { color: #9aa3b3; font-size: 16px; }

.mdk-layer-properties {
    padding: 12px;
    border-radius: 15px;
    background: #f7f9fc;
}
.mdk-layer-properties > * + * { margin-top: 10px; }

.mdk-file-button,
.mdk-action-file,
.mdk-color-control {
    position: relative;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px dashed #bfc7d6;
    border-radius: 13px;
    background: #fbfcfe;
    color: #3b4963;
    cursor: pointer;
    font-size: 11px;
    font-weight: 760;
}

.mdk-file-button input,
.mdk-action-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mdk-file-button .mdk-icon,
.mdk-action-file .mdk-icon { width: 20px; height: 20px; }
.mdk-file-button-small { min-height: 44px; border-style: solid; }

.mdk-inline-controls,
.mdk-dimension-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mdk-color-control { border-style: solid; }
.mdk-color-control input[type="color"] { width: 38px; height: 33px; padding: 2px; border: 0; background: transparent; }

.mdk-segmented {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 4px;
    border-radius: 13px;
    background: #edf1f7;
}

.mdk-segmented button {
    min-height: 35px;
    padding: 4px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #5c687e;
    cursor: pointer;
    font-size: 10px;
    font-weight: 760;
}

.mdk-segmented button.is-active { background: #fff; color: #4f46e5; box-shadow: 0 3px 9px rgba(35, 47, 69, .09); }

.mdk-transform-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.mdk-project-list {
    display: grid;
    gap: 7px;
    max-height: 210px;
    overflow: auto;
}

.mdk-project-item {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border: 1px solid #e0e4ed;
    border-radius: 13px;
    background: #fff;
}

.mdk-project-item img { width: 46px; height: 34px; object-fit: cover; border-radius: 7px; background: #eef1f5; }
.mdk-project-item strong { display: block; font-size: 11px; }
.mdk-project-item span { display: block; margin-top: 2px; color: var(--mdk-muted); font-size: 9px; }
.mdk-project-item-actions { display: flex; gap: 4px; }
.mdk-project-item-actions button { width: 31px; height: 31px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: #eef1f6; color: #45526a; cursor: pointer; }
.mdk-project-item-actions .mdk-icon { width: 16px; height: 16px; }

.mdk-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 11px;
    border-radius: 14px;
    background: #f7f9fc;
    color: #5c687e;
    font-size: 10px;
}
.mdk-shortcuts b { width: 100%; color: #34415b; }
kbd { padding: 2px 5px; border: 1px solid #d5dae5; border-bottom-width: 2px; border-radius: 5px; background: #fff; color: #39465e; font-family: inherit; font-size: 9px; }

.mdk-statusbar {
    position: absolute;
    z-index: 45;
    left: 50%;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: calc(100% - 150px);
    min-height: 35px;
    padding: 0 13px;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(25, 35, 54, .78);
    color: #fff;
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 24px rgba(17, 24, 39, .2);
    font-size: 10px;
    font-weight: 700;
    pointer-events: none;
}

.mdk-statusbar span + span::before { content: '•'; margin-right: 9px; opacity: .45; }
.mdk-save-status { color: #b9f5d0; }

.mdk-toast {
    position: fixed;
    z-index: 2147483647;
    left: 50%;
    bottom: 54px;
    max-width: min(430px, calc(100vw - 24px));
    padding: 11px 15px;
    transform: translateX(-50%) translateY(15px);
    border-radius: 13px;
    background: #192236;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 13px 36px rgba(0, 0, 0, .24);
    font-size: 12px;
    font-weight: 700;
    transition: opacity .18s ease, transform .18s ease;
}
.mdk-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.mdk-toast.is-error { background: #b42318; }

.mdk-ui-restore {
    position: absolute;
    z-index: 55;
    right: 10px;
    top: 10px;
    width: 44px;
    height: 44px;
    display: none;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 14px;
    background: rgba(255, 255, 255, .9);
    color: #4f46e5;
    box-shadow: 0 8px 24px rgba(31, 44, 67, .16);
    cursor: pointer;
}
.mdk-ui-restore .mdk-icon { width: 22px; height: 22px; }

.mdk-studio.is-ui-hidden .mdk-dock,
.mdk-studio.is-ui-hidden .mdk-panel,
.mdk-studio.is-ui-hidden .mdk-statusbar { display: none !important; }
.mdk-studio.is-ui-hidden .mdk-ui-restore { display: grid; }

.mdk-studio.is-left-handed .mdk-tools-dock { left: auto; right: 10px; }
.mdk-studio.is-left-handed .mdk-actions-dock { right: auto; left: 10px; }
.mdk-studio.is-left-handed .mdk-tools-dock .mdk-icon-button::after { left: auto; right: calc(100% + 11px); }
.mdk-studio.is-left-handed .mdk-actions-dock .mdk-icon-button::after { right: auto; left: calc(100% + 11px); }
.mdk-studio.is-left-handed .mdk-panel { right: auto; left: 70px; }

.mdk-tutorial {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(8px);
}
.mdk-tutorial[hidden] { display: none !important; }
.mdk-tutorial-card {
    position: relative;
    width: min(520px, 100%);
    padding: 26px;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .3);
    text-align: center;
}
.mdk-tutorial-card > .mdk-panel-close { position: absolute; right: 12px; top: 12px; }
.mdk-tutorial-card > strong { display: block; color: #26334c; font-size: 22px; }
.mdk-tutorial-card > p { margin: 12px 0 18px; color: #647087; font-size: 13px; line-height: 1.55; }
.mdk-tutorial-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.mdk-tutorial-steps span { padding: 10px; border-radius: 12px; background: #f2f1ff; color: #5147d5; font-size: 11px; font-weight: 760; }
.mdk-tutorial-card .mdk-primary-button { width: 100%; }

@media (max-width: 1050px), (orientation: portrait) {
    .mdk-tools-dock {
        left: 7px;
        right: 7px;
        top: auto;
        bottom: 7px;
        max-width: none;
        max-height: none;
        transform: none;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .mdk-actions-dock {
        right: 7px;
        top: 7px;
        max-height: calc(100% - 80px);
        transform: none;
    }

    .mdk-panel,
    .mdk-panel-wide {
        top: 7px;
        right: 62px;
        width: min(410px, calc(100vw - 76px));
        max-height: calc(100% - 78px);
    }

    .mdk-panel-content { max-height: calc(100dvh - 150px); }
    .mdk-statusbar { bottom: 67px; max-width: calc(100% - 24px); }

    .mdk-studio.is-left-handed .mdk-tools-dock { left: 7px; right: 7px; }
    .mdk-studio.is-left-handed .mdk-actions-dock { right: auto; left: 7px; }
    .mdk-studio.is-left-handed .mdk-panel { left: 62px; right: 7px; }
}

@media (max-width: 650px) {
    .mdk-dock { gap: 6px; padding: 7px; border-radius: 17px; }
    .mdk-icon-button { width: 42px; height: 42px; border-radius: 12px; }
    .mdk-icon-button .mdk-icon { width: 20px; height: 20px; }
    .mdk-icon-button::after { display: none; }

    .mdk-actions-dock { max-height: calc(100% - 67px); }
    .mdk-panel,
    .mdk-panel-wide,
    .mdk-studio.is-left-handed .mdk-panel {
        left: 7px;
        right: 7px;
        top: 7px;
        width: auto;
        max-height: calc(100% - 66px);
        border-radius: 19px;
    }
    .mdk-panel-content { max-height: calc(100dvh - 136px); }

    .mdk-statusbar {
        left: 8px;
        right: 8px;
        bottom: 61px;
        max-width: none;
        transform: none;
        justify-content: center;
        overflow: hidden;
        white-space: nowrap;
    }
    .mdk-statusbar [data-status="coordinates"],
    .mdk-statusbar [data-status="save"] { display: none; }

    .mdk-preset-grid,
    .mdk-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mdk-three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mdk-layer-toolbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mdk-layer-toolbar button span { display: none; }
    .mdk-color-values { grid-template-columns: 1.6fr repeat(3, 1fr); }
    .mdk-tutorial-card { padding: 22px 17px 18px; }
    .mdk-tutorial-steps { grid-template-columns: 1fr; }
}

@media (max-height: 560px) and (orientation: landscape) {
    .mdk-tools-dock,
    .mdk-actions-dock { top: 5px; bottom: 5px; max-height: calc(100% - 10px); }
    .mdk-icon-button { width: 39px; height: 39px; border-radius: 11px; }
    .mdk-icon-button .mdk-icon { width: 19px; height: 19px; }
    .mdk-panel,
    .mdk-panel-wide { top: 5px; bottom: 5px; max-height: none; }
    .mdk-panel-content { max-height: calc(100dvh - 72px); }
    .mdk-statusbar { bottom: 5px; }
}


/* v2.1.0 fixes: tablet landscape + pinch zoom */
.mdk-canvas-viewport {
    overscroll-behavior: none;
}

@media (min-width: 900px) and (max-width: 1366px) and (orientation: landscape) {
    .mdk-panel[data-panel="reference"],
    .mdk-panel-wide[data-panel="reference"] {
        top: 10px;
        bottom: 10px;
        right: 70px;
        left: auto;
        width: min(420px, calc(100vw - 88px));
        max-height: calc(100dvh - 20px);
    }

    .mdk-panel[data-panel="reference"] .mdk-panel-content,
    .mdk-panel-wide[data-panel="reference"] .mdk-panel-content {
        max-height: calc(100dvh - 112px);
        overflow-y: auto;
    }
}