.dtf-app{--bg:#14171d;--card:#1b1f25;--card2:#0f1217;--line:#2d323b;--text:#f5f7fb;--muted:#a8afbc;--blue:#5dade8;--pink:#e94aa5;font-family:Inter,Arial,sans-serif;background:#11151b;color:var(--text);border-radius:18px;overflow:hidden;width:100%;max-width:1600px;margin:20px auto;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.dtf-app *{box-sizing:border-box}.dtf-topbar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:18px 22px;background:#171b21;border-bottom:1px solid var(--line)}.dtf-brand{font-size:24px;font-weight:800}.dtf-subtitle{color:var(--muted);font-size:13px;margin-top:4px}.dtf-upload,.dtf-export{background:var(--blue);color:white;border:0;border-radius:10px;padding:14px 20px;font-size:17px;font-weight:800;cursor:pointer}.dtf-layout{display:grid;grid-template-columns:minmax(0,75%) minmax(320px,25%);gap:18px;padding:18px}.dtf-preview-card,.dtf-controls{min-width:0}.dtf-preview-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}.dtf-toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px;background:#171b21;border-bottom:1px solid var(--line);flex-wrap:wrap}.dtf-segment,.dtf-zoom-controls{display:flex;gap:6px;align-items:center}.dtf-segment button,.dtf-zoom-controls button,.dtf-presets button,.dtf-unit-tabs button,.dtf-color-row button,.dtf-secondary{background:#0d1015;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:10px 12px;cursor:pointer}.dtf-segment button.is-active,.dtf-unit-tabs button.is-active{background:#294052;border-color:#4d87ae}.dtf-zoom-controls span{color:var(--muted);min-width:48px;text-align:center}.dtf-canvas-wrap{position:relative;height:calc(100vh - 190px);min-height:620px;overflow:hidden;background-color:#222;background-image:linear-gradient(45deg,#2c3038 25%,transparent 25%),linear-gradient(-45deg,#2c3038 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2c3038 75%),linear-gradient(-45deg,transparent 75%,#2c3038 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;touch-action:none}.dtf-canvas-wrap canvas{width:100%;height:100%;display:block}.dtf-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);gap:8px}.dtf-empty strong{font-size:28px;color:white}.dtf-split{position:absolute;left:20px;right:20px;bottom:20px;width:calc(100% - 40px);display:none}.dtf-app[data-view="split"] .dtf-split{display:block}.dtf-controls{display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 150px);overflow:auto;padding-right:4px}.dtf-panel{background:var(--card);border:1px solid #222832;border-radius:15px;overflow:hidden}.dtf-panel-head{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;background:transparent;color:white;border:0;padding:18px 20px;font-size:22px;font-weight:800;cursor:pointer}.dtf-panel-body{display:none;padding:0 18px 18px;border-top:1px solid #e6e6e6}.dtf-panel.is-open .dtf-panel-body{display:block}.dtf-row{display:flex;gap:12px;align-items:center}.between{justify-content:space-between}.dtf-small-title{padding-top:16px;margin-top:14px;border-top:1px solid var(--line);font-weight:700}.dtf-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dtf-app label{display:block;color:var(--muted);font-size:15px;margin-top:14px}.dtf-app input[type=number],.dtf-app select{width:100%;background:#0b0d12;color:white;border:1px solid var(--line);border-radius:10px;padding:13px;font-size:18px;margin-top:7px}.dtf-unit-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.dtf-color-row{display:grid;grid-template-columns:1fr auto 56px 76px;gap:10px;align-items:center;margin-top:14px;color:var(--muted)}.dtf-color-row input[type=color]{width:56px;height:48px;background:transparent;border:0}.dtf-color-row code{color:var(--muted);font-size:14px}.dtf-range strong{float:right;color:white}.dtf-range input{width:100%;accent-color:var(--blue);margin-top:12px}.dtf-check{display:flex!important;align-items:center;gap:10px;color:white!important}.dtf-switch-line{justify-content:space-between}.dtf-presets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.dtf-reset{background:#30343b;color:#c4cad4;border:1px solid #454b55;border-radius:12px;padding:16px;font-size:18px;font-weight:800;cursor:pointer}.dtf-reset small{font-weight:400;color:#7f8590}.dtf-export{width:100%;font-size:22px;padding:18px}.dtf-secondary{width:100%;margin-top:14px;color:#bfc6d0!important}@media(max-width:980px){.dtf-layout{grid-template-columns:1fr}.dtf-canvas-wrap{height:520px;min-height:520px}.dtf-topbar{align-items:flex-start;flex-direction:column}.dtf-upload{width:100%;text-align:center}.dtf-color-row{grid-template-columns:1fr auto 52px}.dtf-color-row code{grid-column:1/-1}.dtf-panel-head{font-size:20px}}