*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Inter,sans-serif;font-size:14px;background:#0f0f0f;color:#e8e8e8;height:100vh;overflow:hidden}#root{height:100vh;display:flex;flex-direction:column}.app{display:flex;flex-direction:column;height:100vh}.app__toolbar{display:flex;align-items:center;gap:12px;padding:0 16px;height:48px;background:#1a1a1a;border-bottom:1px solid #2a2a2a;flex-shrink:0}.app__logo{font-weight:700;font-size:15px;color:#fff;letter-spacing:-.3px}.app__logo span{color:#3b82f6}.app__body{display:flex;flex:1;overflow:hidden}.sidebar{width:280px;flex-shrink:0;background:#141414;border-right:1px solid #2a2a2a;display:flex;flex-direction:column;overflow:hidden}.sidebar__section{padding:12px;border-bottom:1px solid #2a2a2a}.sidebar__title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:#666;margin:0 0 10px 2px}.canvas-wrap{flex:1;overflow-y:auto;background:#1e1e1e}.canvas-frame{background:#fff;min-height:100%}.props-panel{width:280px;flex-shrink:0;background:#141414;border-left:1px solid #2a2a2a;display:flex;flex-direction:column;overflow-y:auto}.props-panel__header{padding:12px;border-bottom:1px solid #2a2a2a;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:#666}.props-panel__body{padding:12px;display:flex;flex-direction:column;gap:12px}.field{display:flex;flex-direction:column;gap:4px}.field label{font-size:11px;font-weight:500;color:#999}.field input[type=text],.field textarea,.field select{background:#1f1f1f;border:1px solid #333;color:#e8e8e8;border-radius:5px;padding:6px 8px;font-size:13px;font-family:inherit;width:100%;transition:border-color .15s}.field input[type=text]:focus,.field textarea:focus,.field select:focus{outline:none;border-color:#3b82f6}.field textarea{resize:vertical;min-height:64px}.field input[type=color]{width:36px;height:28px;padding:2px;border:1px solid #333;border-radius:5px;background:#1f1f1f;cursor:pointer}.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;border:none;transition:background .15s,opacity .15s}.btn--primary{background:#3b82f6;color:#fff}.btn--primary:hover{background:#2563eb}.btn--ghost{background:transparent;color:#aaa;border:1px solid #333}.btn--ghost:hover{background:#222;color:#fff}.spacer{flex:1}.field input[type=email],.field input[type=password],.field input[type=number]{background:#1f1f1f;border:1px solid #333;color:#e8e8e8;border-radius:5px;padding:6px 8px;font-size:13px;font-family:inherit;width:100%;transition:border-color .15s}.field input[type=email]:focus,.field input[type=password]:focus,.field input[type=number]:focus{outline:none;border-color:#3b82f6}.muted{color:#777}.row{display:flex;gap:12px;align-items:flex-end}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--danger{color:#f87171}.btn--danger:hover{background:#f871711a;color:#fca5a5}a.btn{text-decoration:none}.splash{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#777;gap:8px}.alert{padding:8px 12px;border-radius:6px;font-size:12px;line-height:1.5}.alert--error{background:#ef44441f;border:1px solid rgba(239,68,68,.3);color:#fca5a5}.auth{height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}.auth__card{width:100%;max-width:380px;background:#161616;border:1px solid #2a2a2a;border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:14px}.page{height:100vh;display:flex;flex-direction:column}.page__body{flex:1;overflow-y:auto;padding:24px;max-width:1100px;width:100%;margin:0 auto}.page__title{font-size:20px;font-weight:600;margin:0 0 20px}.topnav{display:flex;gap:4px;margin-left:12px}.topnav__link{color:#888;text-decoration:none;font-size:13px;padding:6px 10px;border-radius:6px}.topnav__link:hover{color:#fff;background:#222}.topnav__link.is-active{color:#fff;background:#262626}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.card{background:#161616;border:1px solid #2a2a2a;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}.card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.card__title{font-size:15px;font-weight:600}.card__actions{display:flex;gap:8px;align-items:center;margin-top:4px}.pill{font-size:11px;padding:2px 8px;border-radius:999px;background:#262626;color:#999;white-space:nowrap}.pill--ok{background:#10b98126;color:#34d399}.table{width:100%;border-collapse:collapse;font-size:13px}.table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#666;padding:8px;border-bottom:1px solid #2a2a2a}.table td{padding:10px 8px;border-bottom:1px solid #1f1f1f;vertical-align:middle}.table select{background:#1f1f1f;border:1px solid #333;color:#e8e8e8;border-radius:5px;padding:4px 6px;font-size:12px;font-family:inherit}.popover{position:absolute;top:calc(100% + 6px);right:0;width:280px;background:#1a1a1a;border:1px solid #333;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px #00000080;z-index:40}.drawer{width:300px;flex-shrink:0;background:#141414;border-left:1px solid #2a2a2a;display:flex;flex-direction:column}.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #2a2a2a}.drawer__body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}.rev{padding:10px;background:#1a1a1a;border:1px solid #262626;border-radius:8px}.rev__title{font-size:13px;font-weight:500}.media-preview{background:#1f1f1f;border:1px solid #333;border-radius:5px;overflow:hidden;max-height:120px;display:flex;align-items:center;justify-content:center}.media-preview img{max-width:100%;max-height:120px;object-fit:contain;display:block}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}.modal{width:100%;max-width:860px;height:min(80vh,640px);background:#141414;border:1px solid #2a2a2a;border-radius:12px;display:flex;flex-direction:column;overflow:hidden}.modal__head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid #2a2a2a}.modal__body{flex:1;overflow-y:auto;padding:14px;transition:background .15s}.modal__body.is-dragover{background:#3b82f614;outline:2px dashed #3b82f6;outline-offset:-8px}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.media-tile{position:relative;display:flex;flex-direction:column;gap:4px}.media-tile__pick{aspect-ratio:4 / 3;background:#1f1f1f;border:1px solid #333;border-radius:8px;overflow:hidden;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}.media-tile__pick:hover{border-color:#3b82f6}.media-tile__pick img{width:100%;height:100%;object-fit:cover;display:block}.media-tile__file{font-size:12px;font-weight:600;color:#888}.media-tile__meta{display:flex;justify-content:space-between;gap:6px;font-size:11px}.media-tile__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ccc}.media-tile__delete{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:6px;border:none;background:#000000b3;color:#f87171;font-size:11px;cursor:pointer;opacity:0;transition:opacity .15s}.media-tile:hover .media-tile__delete{opacity:1}