:root{--dkib-sand:#f3eadc;--dkib-cream:#fffaf3;--dkib-terracotta:#b86545;--dkib-terracotta-dark:#95492f;--dkib-olive:#66704f;--dkib-ink:#3f3a34;--dkib-line:#d9c8b3;--dkib-muted:#766f67}
.dkib-app{display:grid;grid-template-columns:minmax(350px,460px) minmax(620px,1fr);gap:22px;align-items:stretch;max-width:1650px;color:var(--dkib-ink)}
.dkib-controls,.dkib-preview-panel{min-width:0}
.dkib-controls{display:flex;flex-direction:column;gap:10px}
.dkib-panel,.dkib-preview-panel{background:var(--dkib-cream);border:1px solid var(--dkib-line);border-radius:13px;padding:13px;box-shadow:0 7px 20px rgba(91,70,50,.07)}
.dkib-panel{margin:0}
.dkib-preview-panel{position:sticky;top:32px;padding:16px;display:flex;flex-direction:column;min-height:100%}
.dkib-preview-main{flex:1;display:flex;flex-direction:column}
.dkib-panel h2,.dkib-preview-panel h2{font-size:14px;line-height:1.25;margin:0 0 9px;color:var(--dkib-terracotta-dark);font-weight:500}
.dkib-panel label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:400}
.dkib-panel select,.dkib-panel textarea,.dkib-panel input[type=text]{width:100%;max-width:none;min-height:32px;font-size:12px;border-color:var(--dkib-line);border-radius:7px;background:#fff}
.dkib-panel textarea{min-height:58px}
.dkib-upload-row,.dkib-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dkib-upload-row .dkib-button{flex:1 1 0;min-width:140px}
.dkib-file-label{position:relative;overflow:hidden;cursor:pointer}
.dkib-button{appearance:none;border:1px solid transparent;border-radius:8px;padding:7px 12px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;line-height:1.2;text-decoration:none;cursor:pointer;transition:.15s ease}
.dkib-button:hover{transform:translateY(-1px)}
.dkib-button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.dkib-button-primary{background:var(--dkib-terracotta);color:#fff;border-color:var(--dkib-terracotta)}
.dkib-button-primary:hover{background:var(--dkib-terracotta-dark);border-color:var(--dkib-terracotta-dark);color:#fff}
.dkib-button-secondary{background:var(--dkib-olive);color:#fff;border-color:var(--dkib-olive)}
.dkib-button-secondary:hover{filter:brightness(.9);color:#fff}
.dkib-button-muted{background:#eee5da;color:var(--dkib-ink);border-color:var(--dkib-line)}
.dkib-grid-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dkib-appearance-panel{display:flex;flex-direction:column;gap:10px}
.dkib-options-row{display:grid;gap:9px 12px;align-items:end}
.dkib-options-row-background{grid-template-columns:minmax(120px,1.1fr) 82px minmax(150px,1.5fr)}
.dkib-options-row-details{grid-template-columns:82px repeat(3,minmax(120px,1fr))}
.dkib-options-row input[type=range]{width:100%;accent-color:var(--dkib-terracotta)}
.dkib-options-row output{font-size:11px;font-weight:400;color:var(--dkib-muted)}
.dkib-options-row input[type=color]{width:100%;min-width:54px;height:32px;padding:2px;border:1px solid var(--dkib-line);border-radius:7px;background:#fff}
.dkib-options-row input[type=color]:disabled{opacity:.45;cursor:not-allowed}
.dkib-range-label{min-width:0}
.dkib-canvas-wrap{flex:1;min-height:565px;background:linear-gradient(135deg,#f8f1e7,#eee1cf);border:1px dashed #bda98f;border-radius:11px;display:flex;align-items:center;justify-content:center;overflow:auto;padding:18px}
.dkib-canvas{display:none;max-width:100%;height:auto;box-shadow:0 8px 28px rgba(63,58,52,.2);background:#fff}.dkib-canvas.is-ready{display:block}
.dkib-placeholder{color:var(--dkib-muted);font-size:13px;font-weight:400}
.dkib-actions{border-top:1px solid var(--dkib-line);margin-top:12px;padding-top:12px}
.dkib-actions .dkib-button{flex:1 1 150px}
.dkib-status{flex:1 0 100%;font-size:11.5px;font-weight:400;color:var(--dkib-olive)}
.dkib-status.is-error{color:#a33b2f}
.dkib-settings-table input{width:100%}
.dkib-custom-wrap{margin-top:8px}
.dkib-panel .description,.dkib-preview-panel .description{font-size:10.8px;line-height:1.45;color:var(--dkib-muted);margin:8px 0 0;font-weight:400}
.dkib-version{max-width:1650px;margin-top:7px;font-size:10.5px;color:var(--dkib-muted);text-align:left}
@media(max-width:1200px){.dkib-app{grid-template-columns:minmax(360px,470px) minmax(480px,1fr)}.dkib-options-row-background{grid-template-columns:1fr 76px}.dkib-options-row-background .dkib-range-label{grid-column:1/-1}.dkib-options-row-details{grid-template-columns:76px 1fr 1fr}.dkib-options-row-details .dkib-range-label:last-child{grid-column:2/-1}}
@media(max-width:1000px){.dkib-app{grid-template-columns:1fr}.dkib-preview-panel{position:static;order:-1}.dkib-canvas-wrap{min-height:420px}}
@media(max-width:600px){.dkib-grid-two,.dkib-options-row-background,.dkib-options-row-details{grid-template-columns:1fr}.dkib-options-row-background .dkib-range-label,.dkib-options-row-details .dkib-range-label:last-child{grid-column:auto}.dkib-canvas-wrap{min-height:300px;padding:12px}.dkib-button{width:100%}}

/* Version 1.0.8: kompakte Farb- und Regleranordnung */
.dkib-color-row{display:grid;grid-template-columns:minmax(135px,1fr) 48px minmax(165px,.95fr);gap:9px 10px;align-items:end}
.dkib-text-color-row{grid-template-columns:minmax(135px,1fr) 48px;justify-content:start}
.dkib-color-row .dkib-select-field,.dkib-color-row .dkib-color-field{min-width:0}
.dkib-color-row .dkib-color-field input[type=color]{width:48px;min-width:48px;height:32px;padding:2px;border:1px solid var(--dkib-line);border-radius:7px;background:#fff}
.dkib-color-row .dkib-color-field input[type=color]:disabled{opacity:.45;cursor:not-allowed}
.dkib-background-row .dkib-select-field,.dkib-background-row .dkib-color-field{gap:0}
.dkib-color-field-labeled span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dkib-opacity-field{max-width:230px}
.dkib-range-inline{display:flex;align-items:center;gap:7px;min-width:0}
.dkib-range-inline input[type=range]{flex:1 1 auto;width:auto;min-width:70px;accent-color:var(--dkib-terracotta)}
.dkib-range-inline output{flex:0 0 42px;text-align:right;white-space:nowrap;font-size:11px;font-weight:400;color:var(--dkib-muted)}
.dkib-options-row-sliders{grid-template-columns:repeat(3,minmax(110px,1fr));align-items:end}
@media(max-width:1200px){.dkib-color-row{grid-template-columns:minmax(125px,1fr) 48px}.dkib-opacity-field{grid-column:1/-1;max-width:none}.dkib-options-row-sliders{grid-template-columns:1fr 1fr}.dkib-options-row-sliders .dkib-range-label:last-child{grid-column:1/-1}}
@media(max-width:600px){.dkib-color-row,.dkib-text-color-row,.dkib-options-row-sliders{grid-template-columns:1fr}.dkib-color-row .dkib-color-field input[type=color]{width:54px}.dkib-opacity-field,.dkib-options-row-sliders .dkib-range-label:last-child{grid-column:auto}}

/* Version 1.0.9: einzeilige Farbdarstellung */
.dkib-color-row{display:grid;grid-template-columns:48px minmax(132px,168px) 42px minmax(112px,145px);gap:8px;align-items:center}
.dkib-text-color-row{grid-template-columns:48px minmax(132px,168px) 42px}
.dkib-color-kind{font-size:11.5px;font-weight:400;color:var(--dkib-ink);white-space:nowrap}
.dkib-color-row .dkib-select-field{width:100%;gap:0}
.dkib-color-row .dkib-select-field select{width:100%}
.dkib-color-row .dkib-color-field{display:block;width:42px;gap:0}
.dkib-color-row .dkib-color-field input[type=color]{display:block;width:42px;min-width:42px;height:30px;padding:2px}
.dkib-opacity-field{display:block;max-width:145px;min-width:0}
.dkib-opacity-field .dkib-range-inline{gap:5px}
.dkib-opacity-field .dkib-range-inline input[type=range]{min-width:55px}
.dkib-opacity-field .dkib-range-inline output{flex:0 0 38px;text-align:right}
@media(max-width:1200px){.dkib-color-row{grid-template-columns:48px minmax(125px,1fr) 42px minmax(100px,130px)}.dkib-text-color-row{grid-template-columns:48px minmax(125px,1fr) 42px}.dkib-opacity-field{grid-column:auto;max-width:130px}}
@media(max-width:600px){.dkib-color-row,.dkib-text-color-row{grid-template-columns:44px 1fr 42px}.dkib-background-row .dkib-opacity-field{grid-column:2/4;max-width:none}.dkib-color-row .dkib-color-field input[type=color]{width:42px}}