@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-color:#0f172a;--panel-bg:#1e293b;--border-color:#334155;--text-main:#f8fafc;--text-muted:#94a3b8;--primary:#3b82f6;--primary-hover:#2563eb;--key-bg:#1e293b;--key-border:#334155;--key-shadow:0 4px 6px -1px #00000080, 0 2px 4px -1px #0000004d;--key-bg-hover:#334155;--key-active:#0ea5e9;--key-active-bg:#0284c7}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);flex-direction:column;min-height:100vh;font-family:Inter,sans-serif;display:flex}#root,.app-container{flex-direction:column;height:100vh;display:flex}.topbar{background-color:var(--panel-bg);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex;box-shadow:0 1px 3px #0000001a}.topbar h1{background:linear-gradient(90deg,#38bdf8,#818cf8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem;font-weight:700}.topbar-actions{gap:1rem;display:flex}.btn{background-color:var(--panel-bg);color:var(--text-main);border:1px solid var(--border-color);cursor:pointer;border-radius:.5rem;padding:.5rem 1rem;font-weight:500;transition:all .2s}.btn:hover{background-color:var(--key-bg-hover)}.btn.primary{background-color:var(--primary);color:#fff;border:none}.btn.primary:hover{background-color:var(--primary-hover)}.main-content{flex:1;display:flex;overflow:hidden}.workspace{flex-direction:column;flex:1;align-items:center;padding:2rem;display:flex;overflow-y:auto}.keyboard-container{border:1px solid var(--border-color);zoom:1.25;background:linear-gradient(145deg,#1e293b,#0f172a);border-radius:1.5rem;flex-direction:column;gap:.5rem;width:100%;max-width:1100px;margin-top:2rem;padding:2rem;display:flex;box-shadow:0 20px 25px -5px #00000080,0 10px 10px -5px #0003}.keyboard-row{gap:.5rem;width:100%;display:flex}.key{background-color:var(--key-bg);border:1px solid var(--key-border);box-shadow:var(--key-shadow);cursor:pointer;-webkit-user-select:none;user-select:none;height:3.5rem;color:var(--text-main);border-radius:.5rem;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;font-size:.85rem;font-weight:500;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.key.iso-enter-de{z-index:10;clip-path:polygon(0% 0%,100% 0%,100% 100%,16.66% 100%,16.66% 48.5%,0% 48.5%);border-left:1px solid var(--border-color);border-bottom:1px solid var(--border-color);align-self:flex-start;height:7.5rem;margin-bottom:-4rem}.key:hover{background-color:var(--key-bg-hover);transform:translateY(-2px);box-shadow:0 6px 8px -1px #0009,0 4px 6px -1px #0006}.key:active{transform:translateY(1px);box-shadow:0 1px 2px -1px #00000080}.key.selected{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary)}.key.has-action{color:#38bdf8}.key .key-label{color:var(--text-muted);font-size:.7rem;position:absolute;top:.25rem;left:.35rem}.key .key-action{text-align:center;white-space:nowrap;text-overflow:ellipsis;width:90%;margin-top:.5rem;font-size:.6rem;font-weight:600;overflow:hidden}.sidebar{background-color:var(--panel-bg);border-left:1px solid var(--border-color);flex-direction:column;gap:1.5rem;width:350px;padding:1.5rem;display:flex;overflow-y:auto}.sidebar h2{margin-bottom:.5rem;font-size:1.25rem}.form-group{flex-direction:column;gap:.5rem;display:flex}.form-group label{color:var(--text-muted);font-size:.875rem;font-weight:500}.form-group input,.form-group select,.form-group textarea{background-color:var(--bg-color);border:1px solid var(--border-color);color:var(--text-main);border-radius:.5rem;outline:none;padding:.75rem;font-family:Inter,sans-serif;transition:border-color .2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary)}textarea{resize:vertical;min-height:100px}.layer-tabs{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.layer-tab{background-color:var(--bg-color);color:var(--text-muted);border:1px solid var(--border-color);cursor:pointer;border-radius:2rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s}.layer-tab:hover{background-color:var(--key-bg-hover);color:var(--text-main)}.layer-tab.active{background-color:var(--primary);color:#fff;border-color:var(--primary)}.quick-actions{grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.quick-action-btn{background-color:var(--bg-color);border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;border-radius:.375rem;padding:.5rem;font-size:.8rem;transition:all .2s}.quick-action-btn:hover{background-color:var(--key-bg-hover);color:var(--text-main)}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background-color:var(--panel-bg);border:1px solid var(--border-color);border-radius:1rem;width:90%;max-width:600px;padding:2rem;box-shadow:0 25px 50px -12px #00000080}.modal h2{margin-bottom:1rem}.modal-actions{justify-content:flex-end;gap:1rem;margin-top:1.5rem;display:flex}