:root{--bg:#08101e;--panel:#111b2e;--panel2:#17243a;--line:#263753;--text:#eaf0fa;--muted:#92a3bd;--accent:#4f8cff;--green:#39d98a}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(145deg,#07101e,#0d1526 60%,#101a2b);color:var(--text);font:14px/1.4 Inter,Segoe UI,Arial,sans-serif;height:100vh;overflow:hidden}
header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);background:#0a1322ee}.brand{display:flex;gap:12px;align-items:center}.brand small{display:block;color:var(--muted)}.logo{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#7c5cff);font-weight:800;font-size:20px}
button,input,select,textarea{font:inherit}button{border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:9px 12px;border-radius:9px;cursor:pointer}button:hover{border-color:#4f8cff}.primary{background:var(--accent);border-color:var(--accent);font-weight:700}nav{display:flex;gap:8px}
main{height:calc(100vh - 72px);display:grid;grid-template-columns:330px 1fr}.sidebar{padding:14px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--line);overflow:auto}.workspace{padding:14px;overflow:auto}.panel{background:linear-gradient(160deg,#111d30,#0f192a);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 14px 35px #0003}.grow{flex:1;min-height:200px}.panel-title{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:12px}
label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:12px}input,select,textarea{background:#0b1424;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:9px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--accent)}textarea{resize:vertical;min-height:42px;line-height:1.2}.project-panel{display:grid;gap:10px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hint{font-size:11px;color:var(--muted);margin:10px 0 0}
.toolbar{display:grid;grid-template-columns:1.3fr 1fr .8fr 1fr .65fr .65fr;gap:12px;margin-bottom:14px}.editor-grid{display:grid;grid-template-columns:minmax(540px,1.15fr) minmax(370px,.85fr);gap:14px}.preview-stage{min-height:360px;border:1px dashed #385071;border-radius:12px;background:radial-gradient(circle at 50% 45%,#1e314d,#0b1423 62%);display:grid;place-items:center;padding:25px;overflow:auto}
.device-preview{width:310px;height:310px;padding:35px;background:linear-gradient(145deg,#e7ebec,#b8c0c2);border-radius:5px;box-shadow:0 20px 42px #0009;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.22fr) minmax(0,1fr);position:relative}.device-preview:before{content:"";position:absolute;inset:25px;background:#f5f5f2;border:1px solid #aeb3b2;box-shadow:inset 0 0 8px #0002}.keys,.label-holder{position:relative;z-index:1;min-width:0}.keys{display:grid;gap:2px}.rows-1 .keys{grid-template-rows:1fr}.rows-2 .keys{grid-template-rows:repeat(2,1fr)}.rows-3 .keys{grid-template-rows:repeat(3,1fr)}.rows-4 .keys{grid-template-rows:repeat(4,1fr)}.rows-5 .keys{grid-template-rows:repeat(5,1fr)}.keys>div{width:100%;min-width:0;background:linear-gradient(135deg,#fafaf8,#e3e5e2);border:1px solid #9da2a0;display:grid;place-items:center;color:#98a09e;font-size:10px}.keys.left>div{border-radius:2px 0 0 2px}.keys.right>div{border-radius:0 2px 2px 0}.label-holder{padding:2px 5px;background:#d8ddda;border-top:1px solid #929997;border-bottom:1px solid #929997;display:flex;flex-direction:column;min-width:0;overflow:hidden}
#labelPreview{width:100%;height:100%;background:#f2f4f0;color:#10151c;border:1px solid #aeb4b1;border-radius:2px;display:grid;position:relative;overflow:hidden;transform-origin:center}.label-field{display:flex;align-items:center;justify-content:center;gap:3px;padding:2px;font-weight:600;text-align:center;overflow:hidden;white-space:pre-wrap;line-height:1.08;border-bottom:1px dotted #b7bdb9}.label-field:nth-child(odd){border-right:1px dotted #b7bdb9}.label-field:nth-last-child(-n+2){border-bottom:0}.label-field.active{background:#dce8ff;box-shadow:inset 0 0 0 1px #4f8cff}.label-field svg{flex:none;stroke-width:1.8}
.device-display{height:42px;min-width:0;max-width:100%;overflow:hidden;flex:none;margin-bottom:3px;border:1px solid #858d8b;background:linear-gradient(#d9e1df,#bbc7c3);color:#34403d;display:grid;place-items:center;font:700 12px/1 monospace;box-shadow:inset 0 0 6px #52605b55}.layout-display-strip .label-holder,.layout-tenton-display .label-holder{padding:4px}.layout-tenton,.layout-tenton-display{height:330px;width:250px;padding:25px 22px;border-radius:3px;grid-template-columns:minmax(0,.7fr) minmax(0,1.65fr) minmax(0,.7fr)}.layout-tenton:before,.layout-tenton-display:before{inset:16px}.layout-tenton .keys>div,.layout-tenton-display .keys>div{border-radius:3px;margin:2px;background:linear-gradient(145deg,#f6f6f4,#d9dcda)}.layout-mdt-strip{width:300px;height:300px;padding:36px;grid-template-columns:minmax(0,1.28fr) minmax(0,.52fr) minmax(0,1.28fr)}.layout-mdt-strip .keys>div{margin:1px;border-radius:3px}.maker-mdt .label-holder{background:#eef0ed;padding:3px}.maker-busch-jaeger .label-holder{background:#eee;padding:4px}
.device-brand,.device-model-mark{position:absolute;z-index:3;color:#8c9391;letter-spacing:.04em;pointer-events:none}.device-brand{top:28px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:700}.device-model-mark{bottom:27px;left:50%;transform:translateX(-50%);font-size:6px;white-space:nowrap;opacity:.7}.status-led{position:absolute;width:4px;height:4px;border-radius:50%;background:#8fada1;border:1px solid #718079;box-shadow:0 0 3px #7ebf9c;opacity:.75}.keys.left .status-led{right:6px;top:7px}.keys.right .status-led{left:6px;top:7px}.keys>div{position:relative;box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 2px #adb2b0,0 1px 1px #0002}.keys>div span{opacity:.55}.device-display{grid-template-columns:auto 1fr auto;padding:0 6px;gap:4px;text-shadow:0 1px #fff8}.device-display b{text-align:center;font-size:11px}.display-mode,.display-bars{font-size:7px;font-weight:600}

/* Merten System M: breiter Metallträger, vier schmale Außenwippen und
   mittige transparente Beschriftungseinlage. */
.maker-merten{background:linear-gradient(135deg,#dfe4e5 0,#bfc6c7 48%,#e8ebeb 100%);border:1px solid #9ba3a4;border-radius:7px;padding:40px 37px;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr) minmax(0,1fr)}
.maker-merten:before{inset:27px;border-color:#a8adac;background:linear-gradient(145deg,#fafaf8,#e8e9e6);box-shadow:inset 0 0 10px #0002,0 1px 1px #fff}
.maker-merten .keys{gap:3px}.maker-merten .keys>div{background:linear-gradient(110deg,#fbfbf9,#e9eae7 62%,#d8dad7);border-color:#9da3a1}.maker-merten .label-holder{margin:0 4px;padding:3px 5px;background:linear-gradient(90deg,#cdd2cf,#edf0ed,#c9cfcb);border:1px solid #959c99;box-shadow:inset 0 0 4px #0002}.maker-merten #labelPreview{background:linear-gradient(90deg,#f2f4ef,#fbfcf9 50%,#eef1ec)}.maker-merten .device-brand{color:#737a78}.maker-merten .status-led{background:#df8b55;border-color:#bc6d40;box-shadow:0 0 4px #e49a66}
.layout-display-strip{padding-top:38px}.layout-display-strip .device-display{height:48px;background:linear-gradient(#cdd8d3,#aebbb6);border:2px solid #777f7c;box-shadow:inset 0 0 7px #42504b66,0 1px #fff}.layout-display-strip .label-holder{margin-top:0}

/* Busch-Tenton: schlankes Hochformat mit bündigen Tastenreihen,
   breitem zentralem Schriftfeld und farbigen Statusanzeigen. */
.maker-busch-jaeger{background:linear-gradient(115deg,#f2f2ef,#d5d9d7 55%,#f6f6f4);border:1px solid #a9aeac;box-shadow:0 20px 42px #0009,inset 0 0 0 1px #fff;padding:29px 20px 31px;grid-template-columns:minmax(0,.7fr) minmax(0,1.65fr) minmax(0,.7fr)}
.maker-busch-jaeger:before{inset:13px;background:linear-gradient(145deg,#fbfbf9,#e5e7e4);border-color:#a7acaa;box-shadow:inset 0 0 5px #0002}
.maker-busch-jaeger .device-brand{top:17px;font-size:7px;color:#5d6462}.maker-busch-jaeger .device-model-mark{bottom:17px}.maker-busch-jaeger .keys{gap:5px;padding:5px 0}.maker-busch-jaeger .keys>div{margin:0;border-radius:4px;border-color:#9fa5a3;background:linear-gradient(145deg,#fdfdfb,#dedfdd);box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 2px #c0c3c1,0 1px 2px #0002}.maker-busch-jaeger .label-holder{margin:0 4px;padding:5px;background:#e7e9e6;border:1px solid #929996;box-shadow:inset 0 0 4px #0002}.maker-busch-jaeger #labelPreview{border-color:#929996;background:linear-gradient(90deg,#f4f5f1,#fff 48%,#f0f2ee)}.maker-busch-jaeger .status-led{width:5px;height:5px;background:#e4b636;border-color:#b18517;box-shadow:0 0 4px #f0c850}.maker-busch-jaeger .device-display{height:38px;background:#d4ded9;border-color:#737d79}

/* MDT 55: quadratisches 55-mm-Zentralstück, große Wippen,
   sehr schmales mittiges Schriftfeld und LED-Punkte an jeder Taste. */
.maker-mdt{width:300px;height:300px;padding:49px 43px;background:linear-gradient(135deg,#f4f4f1,#cfd4d2 52%,#f7f7f5);border:1px solid #a9afad;border-radius:4px;grid-template-columns:minmax(0,1.28fr) minmax(0,.52fr) minmax(0,1.28fr)}
.maker-mdt:before{inset:30px;background:linear-gradient(145deg,#fafaf8,#e4e6e3);border-color:#a7adaa;box-shadow:inset 0 0 7px #0002,0 1px #fff}
.maker-mdt .device-brand{top:34px;color:#34719a;font-size:8px}.maker-mdt .device-model-mark{bottom:33px}.maker-mdt .keys{gap:3px}.maker-mdt .keys>div{margin:0;border-radius:2px;background:linear-gradient(120deg,#fcfcfa,#e3e5e2);border-color:#9ca3a0}.maker-mdt .label-holder{margin:0 4px;padding:2px;background:linear-gradient(90deg,#d0d5d2,#f4f5f1,#cfd4d1);border:1px solid #919895;box-shadow:inset 0 0 3px #0003}.maker-mdt #labelPreview{background:#f6f7f3;border-color:#a0a7a3}.maker-mdt .status-led{width:5px;height:5px;background:#74a565;border-color:#527a48;box-shadow:0 0 4px #79b66a}.maker-mdt .keys.left .status-led{right:7px}.maker-mdt .keys.right .status-led{left:7px}
/* Homematic IP HmIP-WRC6: drei gleich große Tastenpaare und eine
   freizuhaltende Systemtaste zwischen der zweiten und dritten Reihe. */
.maker-homematic-ip{width:310px;height:310px;padding:48px 42px;background:linear-gradient(145deg,#f8f8f6,#d8dcda);border:1px solid #adb2b0;border-radius:4px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr)}
.maker-homematic-ip:before{inset:29px;background:linear-gradient(145deg,#fff,#e9eae7);border-color:#a9aeac}.maker-homematic-ip .keys{gap:3px}.maker-homematic-ip .keys>div{background:linear-gradient(120deg,#fdfdfb,#e5e6e3);border-color:#999f9c}.maker-homematic-ip .label-holder{margin:0 4px;padding:3px 5px;background:linear-gradient(90deg,#d8ddda,#f8faf7,#d4d9d6);border:1px solid #959c99}.maker-homematic-ip #labelPreview{background:linear-gradient(90deg,#f4f6f2,#fff 50%,#f1f3ef)}.maker-homematic-ip .device-brand{top:34px;color:#28739b;font-size:8px}.maker-homematic-ip .device-model-mark{bottom:33px}.maker-homematic-ip .status-led{display:none}
.system-key{position:absolute;z-index:8;left:50%;top:66.666%;width:24px;height:24px;transform:translate(-50%,-50%);border-radius:7px;background:linear-gradient(145deg,#f7f7f4,#d5d8d5);border:2px solid #7e8885;box-shadow:0 1px 2px #0004,inset 0 0 0 2px #fff;pointer-events:none}.system-key span{position:absolute;inset:5px;border:2px solid #1592bd;border-radius:3px}.layout-hmip-wrc6 .label-field:nth-child(3),.layout-hmip-wrc6 .label-field:nth-child(4){padding-bottom:13px}.layout-hmip-wrc6 .label-field:nth-child(5),.layout-hmip-wrc6 .label-field:nth-child(6){padding-top:13px}
.badge{font-size:11px;color:#b9c8dd;background:#1b2a41;padding:4px 8px;border-radius:20px}.field-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:13px 0 8px}.field-editor h3{font-size:13px;margin:0}.format-bar{display:flex;align-items:end;gap:5px;flex-wrap:wrap;justify-content:flex-end}.format-bar label{width:76px}.format-bar input{padding:6px 7px}.format-bar button{min-width:33px;padding:7px}.format-button.active{background:var(--accent);border-color:var(--accent);color:#fff}.field-row{display:grid;grid-template-columns:28px 1fr 38px 30px;gap:7px;align-items:center;margin-bottom:7px}.field-row .n{color:var(--muted);text-align:center}.field-row button{padding:7px}.field-row.active{background:#142947;border-radius:9px;padding:3px}
.search{width:100%;margin-bottom:10px}.categories{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}.categories button{padding:5px 8px;font-size:11px}.categories .active{background:var(--accent)}#iconGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:7px;max-height:590px;overflow:auto;padding-right:3px}.icon-card{min-height:68px;background:#0b1525;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;padding:6px;cursor:pointer;color:#dbe7f7}.icon-card:hover,.icon-card.selected{border-color:var(--accent);background:#142947}.icon-card span{font-size:9px;color:var(--muted);max-width:65px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-actions{display:flex;align-items:center;gap:7px}.icon-actions button{font-size:11px;padding:5px 8px}.custom-icon-image{display:block;object-fit:contain;filter:grayscale(1) contrast(1.2)}.icon-card .custom-icon-image,.field-row button .custom-icon-image{filter:brightness(0) invert(1)}.icon-card{position:relative}.remove-custom-icon{position:absolute;right:3px;top:3px;border:0;background:#1b2940;color:#ff8790;width:19px;height:19px;min-width:0;padding:0;border-radius:50%;line-height:17px}
.label-item{padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:7px;cursor:pointer;display:flex;justify-content:space-between}.label-item.active{border-color:var(--accent);background:#172a46}.label-item small{color:var(--muted);display:block}.label-item .delete{border:0;background:none;color:#ff7682;padding:2px}
#toast{position:fixed;right:18px;bottom:18px;padding:11px 16px;background:#18304b;border:1px solid #3e6691;border-radius:10px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:none}
@media(max-width:1300px){main{grid-template-columns:280px 1fr}.editor-grid{grid-template-columns:1fr}.toolbar{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:800px){main{grid-template-columns:1fr}.sidebar{display:none}.toolbar{grid-template-columns:1fr 1fr}}
.user-name{font-size:12px;color:#9fb0c9;margin-left:8px}.auth-screen{position:fixed;inset:0;z-index:1000;background:radial-gradient(circle at 50% 20%,#263b5a,#101826 58%);display:grid;place-items:center}.auth-screen.hidden{display:none}.auth-card{width:min(390px,calc(100vw - 32px));padding:32px;border:1px solid #334762;border-radius:18px;background:#172235;box-shadow:0 24px 80px #0008;display:grid;gap:16px}.auth-card h1,.auth-card p{margin:0;text-align:center}.auth-card p{color:#9fb0c9}.auth-card label{display:grid;gap:7px}.auth-card input{width:100%}.auth-logo{margin:auto;width:52px;height:52px;font-size:24px}.form-error{min-height:20px;color:#ff9a9a;text-align:center;font-size:13px}dialog{width:min(700px,calc(100vw - 32px));max-height:75vh;color:#eef4ff;background:#172235;border:1px solid #3a4b65;border-radius:14px;padding:20px;box-shadow:0 28px 100px #000b}dialog::backdrop{background:#05080dbb}.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog-head h2{margin:0}.dialog-head button{font-size:22px}.project-results{display:grid;gap:8px;margin-top:14px;max-height:52vh;overflow:auto}.project-result{border:1px solid #354761;border-radius:10px;padding:12px;cursor:pointer;background:#202e43}.project-result:hover{border-color:#6e9fe8}.project-result small{display:block;color:#9fb0c9;margin-top:4px}.project-panel>button{width:100%;margin-top:8px}
.user-form{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid #354761}.user-form h3{grid-column:1/-1;margin:0}.user-form button{grid-column:1/-1}.user-entry{display:flex;justify-content:space-between;border-bottom:1px solid #30415a;padding:9px}.user-entry small{color:#9fb0c9}
.user-entry.inactive{opacity:.55}.user-entry button{align-self:center}