@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");:root{--primary:#6366f1;--primary-dark:#4f46e5;--primary-light:#818cf8;--bg:#f8fafc;--panel:#fff;--border:#e2e8f0;--text:#0f172a;--text-muted:#64748b;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow:0 4px 6px -1px rgba(0,0,0,.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1);--shadow-xl:0 20px 25px -5px rgba(0,0,0,.1);--grid:20px;--danger:#ef4444;--success:#10b981;--warning:#f59e0b}*{box-sizing:border-box;margin:0;padding:0}#app,body,html{font-family:Inter,system-ui,-apple-system,sans-serif;height:100%}body{background:var(--bg);color:var(--text);overflow:hidden}.topbar{background:var(--panel);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);justify-content:space-between;padding:12px 20px;z-index:100}.topbar,.topbar-left{align-items:center;display:flex}.topbar-left{gap:16px}.topbar h1{align-items:center;color:var(--text);display:flex;font-size:20px;font-weight:700;gap:10px}.topbar h1 svg{color:var(--primary)}.controls{align-items:center;display:flex;gap:8px}.controls button{align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:8px;color:var(--text);cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:6px;padding:8px 14px;transition:all .2s}.controls button:hover{background:var(--bg);border-color:var(--primary-light)}.controls button.mode.active,.controls button.primary{background:var(--primary);border-color:var(--primary);color:#fff}.controls button.mode.active:hover{background:var(--primary-dark)}.controls .divider{background:var(--border);height:24px;margin:0 4px;width:1px}#zoomLevel{color:var(--text-muted);font-size:13px;font-weight:500;min-width:45px;text-align:center}.workspace{display:flex;height:calc(100% - 65px)}.palette{background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;width:280px}.palette-header{border-bottom:1px solid var(--border);padding:16px}.palette-header h3{color:var(--text);font-size:16px;font-weight:600;margin-bottom:12px}.palette-header input{border:1px solid var(--border);border-radius:6px;font-size:14px;outline:none;padding:8px 12px;transition:all .2s;width:100%}.palette-header input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.1)}.palette-categories{flex:1;overflow-y:auto;padding:12px}.palette-category{margin-bottom:16px}.category-title{align-items:center;background:var(--bg);border-radius:6px;color:var(--text-muted);cursor:pointer;display:flex;font-size:13px;font-weight:600;justify-content:space-between;letter-spacing:.5px;padding:8px 12px;text-transform:uppercase;transition:all .2s;user-select:none}.category-title:hover{background:#e2e8f0}.category-title svg{height:16px;transition:transform .2s;width:16px}.category-title.collapsed svg{transform:rotate(-90deg)}.category-items{display:grid;gap:8px;margin-top:8px;padding:0 4px}.category-items.hidden{display:none}.palette-item{align-items:center;background:var(--panel);border:1.5px solid var(--border);border-radius:8px;cursor:grab;display:flex;gap:12px;padding:10px;transition:all .2s}.palette-item:hover{border-color:var(--primary);box-shadow:var(--shadow);transform:translateY(-1px)}.palette-item:active{cursor:grabbing;transform:translateY(0)}.palette-item .preview{align-items:center;background:var(--bg);border-radius:6px;display:flex;flex-shrink:0;height:45px;justify-content:center;width:50px}.palette-item .preview .uml-element{box-shadow:none;position:static;transform:scale(.4)}.palette-item .info{flex:1;min-width:0}.palette-item .info strong{color:var(--text);display:block;font-size:13px;font-weight:600;margin-bottom:2px}.palette-item .info .small-muted{color:var(--text-muted);font-size:11px}.canvas-wrap{background:var(--bg);flex:1;overflow:auto;position:relative}.canvas-container{height:auto;overflow:auto;padding:20px;width:auto}.canvas{background:#fff;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:var(--grid) var(--grid);border-radius:12px;min-height:1200px;min-width:1600px;position:relative}.svg-layer{height:100%;width:100%;z-index:1}.props{background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;width:320px}.props h3{border-bottom:1px solid var(--border);color:var(--text);font-size:16px;font-weight:600;padding:16px}.props-content{flex:1;overflow-y:auto;padding:16px}.empty-state{align-items:center;color:var(--text-muted);display:flex;flex-direction:column;height:200px;justify-content:center;text-align:center}.empty-state svg{margin-bottom:12px;opacity:.5}.empty-state p{font-size:14px}.prop-section{margin-bottom:20px}.prop-section-title{color:var(--text-muted);font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:12px;text-transform:uppercase}.prop-row{margin-bottom:12px}.prop-row label{color:var(--text);display:block;font-size:13px;font-weight:500;margin-bottom:6px}.prop-row input[type=color]{border:1px solid var(--border);border-radius:6px;cursor:pointer;height:40px;padding:4px;width:100%}.prop-row input[type=number],.prop-row input[type=text]{border:1px solid var(--border);border-radius:6px;font-size:14px;outline:none;padding:8px 12px;transition:all .2s;width:100%}.prop-row input[type=number]:focus,.prop-row input[type=text]:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.1)}.prop-row input[type=range]{margin-right:10px;width:calc(100% - 50px)}.prop-row .range-value{color:var(--text-muted);display:inline-block;font-size:12px;font-weight:500;min-width:40px}.prop-row select{background:#fff;border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:14px;outline:none;padding:8px 12px;width:100%}.prop-actions{border-top:1px solid var(--border);margin-top:20px;padding-top:20px}.btn-delete{background:var(--danger);border:none;border-radius:6px;color:#fff;cursor:pointer;font-weight:600;padding:10px;transition:all .2s;width:100%}.btn-delete:hover{background:#dc2626}.uml-element{align-items:center;cursor:move;display:flex;flex-direction:column;justify-content:center;position:absolute;transition:box-shadow .2s;user-select:none;z-index:10}.uml-element:hover{box-shadow:var(--shadow-lg)}.uml-element.selected{box-shadow:var(--shadow-xl),0 0 0 4px rgba(99,102,241,.1);outline:2px solid var(--primary);outline-offset:2px}.uml-element.hide-controls .delete-btn,.uml-element.hide-controls .resize-handle{display:none!important}#canvas,.canvas-container,.canvas-wrap{background:#fff!important}.delete-btn{align-items:center;background:var(--danger);border:2px solid #fff;border-radius:50%;box-shadow:var(--shadow);color:#fff;cursor:pointer;display:none;font-size:14px;font-weight:700;height:24px;justify-content:center;position:absolute;right:-10px;top:-10px;transition:all .2s;width:24px;z-index:100}.uml-element.selected .delete-btn{display:flex}.delete-btn:hover{background:#dc2626;transform:scale(1.1)}.resize-handle{background:var(--primary);border:2px solid #fff;border-radius:3px;bottom:-6px;box-shadow:var(--shadow);cursor:se-resize;display:none;height:14px;position:absolute;right:-6px;width:14px}.uml-element.selected .resize-handle{display:block}.element-content,.element-label{font-size:13px;outline:none;padding:6px;text-align:center}.element-content:focus,.element-label:focus{background:rgba(99,102,241,.05);border-radius:4px}.actor-element{background:transparent;height:120px;padding:12px;width:90px}.actor-figure{align-items:center;display:flex;flex-direction:column;height:100%;position:relative;width:100%}.actor-head{background:#fff;border:3px solid #1e293b;border-radius:50%;height:28px;width:28px}.actor-body{background:#1e293b;height:40px;margin-top:6px;width:3px}.actor-arms{background:#1e293b;height:3px;margin-top:8px;width:64px}.actor-leg{background:#1e293b;bottom:10px;height:34px;position:absolute;width:3px}.actor-leg.left{left:28px;transform:rotate(-22deg);transform-origin:bottom}.actor-leg.right{right:28px;transform:rotate(22deg);transform-origin:bottom}.usecase-element{border:2px solid #1e293b;border-radius:60px;min-height:70px;min-width:140px;padding:12px 20px}.database,.usecase-element{align-items:center;background:#fff;display:flex;justify-content:center}.database{border:2px solid #000;border-radius:80px/30px;height:40px;position:relative;width:160px}.database:before{top:-15px}.database:after,.database:before{background:#fff;border:2px solid #000;border-radius:50%;content:"";height:40px;left:-2px;position:absolute;width:calc(100% + 4px)}.database:after{bottom:-15px}.node-computer
.monitor{background:#000;border-radius:6px;height:96px;margin:40px auto 0;padding:6px;position:relative;width:160px}.node-computer
.screen{background:#ddd;border-radius:2px;height:80%;width:100%}.node-computer
.controls{bottom:4px;left:6px;position:absolute}.node-computer
.controls span{background:#ddd;border-radius:1px;display:inline-block;height:3px;margin-right:3px;width:10px}.node-computer
.power-btn{background:#ddd;border-radius:50%;bottom:4px;height:4px;position:absolute;right:6px;width:4px}.node-computer
.stand-neck{background:#000;border-radius:4px;height:14px;margin:-2px auto 0;width:20px}.node-computer
.stand-base{background:#000;border-radius:50%;height:16px;margin:-4px auto 0;width:70px}.class-element{background:#fff;border:2px solid #1e293b;border-radius:8px;display:flex;flex-direction:column;min-height:120px;min-width:120px;overflow:hidden}.class-header{background:var(--bg);border-bottom:1px solid #e2e8f0;font-weight:600;padding:10px;text-align:center}.class-section{border-bottom:1px dashed #e2e8f0;min-height:40px;padding:10px}.class-section:last-child{border-bottom:none}.lifeline-element{align-items:center;display:flex;flex-direction:column;height:120px;width:120px}.lifeline-header{background:#fff;border:2px solid #1e293b;border-radius:6px;font-weight:500;margin-bottom:8px;padding:8px 12px}.lifeline-line{background:transparent;border-left:2px dashed #1e293b;height:240px;width:2px}.activation-element{background:#1e293b;border-radius:4px;height:80px;width:20px}.message-element{align-items:center;background:#fff;border:2px solid #1e293b;border-radius:6px;display:flex;font-weight:500;gap:8px;padding:8px 12px}.start-node{height:28px;width:28px}.end-node,.start-node{background:#1e293b;border-radius:50%}.end-node{align-items:center;display:flex;height:36px;justify-content:center;width:36px}.end-node .inner{background:#fff;border-radius:50%;height:16px;width:16px}.decision-element{align-items:center;background:#fff;border:2px solid #1e293b;display:flex;height:90px;justify-content:center;transform:rotate(45deg);width:90px}.decision-element .element-content{font-size:18px;font-weight:700;transform:rotate(-45deg)}.bar-element{background:#1e293b;border-radius:4px;height:10px;width:140px}.state-element{background:#fff;border:2px solid #1e293b;border-radius:8px;min-width:150px;overflow:hidden}.element-header{background:var(--bg);border-bottom:1px solid #e2e8f0;font-weight:600;padding:10px;text-align:center}.state-section{min-height:40px;padding:10px}.note-element{background:#fef3c7;border:2px solid #f59e0b;border-radius:8px;box-shadow:var(--shadow);min-height:90px;min-width:140px;padding:12px}.component-element{background:#fff;border:2px solid #1e293b;border-radius:8px;min-height:100px;min-width:100px;padding:30px 12px 12px;position:relative}.component-rect{background:#fff;border:2px solid #1e293b;border-radius:2px;height:14px;left:10px;position:absolute;top:10px;width:32px}.component-rect.small{height:10px;left:16px;top:14px;width:20px}.uml-element.connecting{box-shadow:0 0 0 4px rgba(59,130,246,.12)}.svg-layer{left:0;pointer-events:none;position:absolute;top:0;z-index:5}.connection-group{pointer-events:auto}.connection-curve,.connection-straight{stroke:var(--text);stroke-linecap:round;stroke-width:2}.connection-curve{display:none}.connection-hit{cursor:pointer;pointer-events:stroke}.connection-label{fill:#1f2937;font-family:Arial,sans-serif}.package-element{background:#fff;border:2px solid #1e293b;border-radius:8px;min-height:150px;min-width:120px;overflow:hidden}.package-tab{background:var(--bg);border-bottom:2px solid #1e293b;font-weight:600;padding:8px 12px}.element-body,.node-element{min-height:80px;padding:12px}.node-element{align-items:center;background:#fff;border:2px solid #1e293b;border-radius:8px;display:flex;font-weight:600;justify-content:center;min-width:140px}.shape-circle{border-radius:50%;height:50px;width:50px}.shape-circle,.shape-parallelogram{background:#fff;border:2px solid #000}.shape-parallelogram{height:100px;transform:skewX(-20deg);width:150px}.shape-diamond{background:#fff;border:2px solid #000;height:100px;transform:rotate(45deg);width:100px}.shape-decortext{font-size:20px}.shape-arrow-right{background:#333;height:4px;position:relative;width:60px}.shape-arrow-right:after{border-bottom:8px solid transparent;border-left:12px solid #333;border-top:8px solid transparent;content:"";height:0;position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:0}.shape-arrow-left{background:#000;height:4px;position:relative;width:60px}.shape-arrow-left:after{border-bottom:8px solid transparent;border-right:12px solid #000;border-top:8px solid transparent;content:"";height:0;left:-10px;position:absolute;top:50%;transform:translateY(-50%);width:0}.shape-arrow-down{background:#000;height:60px;position:relative;width:4px}.shape-arrow-down:after{border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid #000;bottom:-12px;content:"";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0}.shape-arrow-up{background:#000;height:60px;position:relative;width:4px}.shape-arrow-up:after{border-bottom:12px solid #000;border-left:8px solid transparent;border-right:8px solid transparent;content:"";height:0;left:50%;position:absolute;top:-12px;transform:translateX(-50%);width:0}.shape-horizontal-line{background:#000;height:2px;width:60px}.shape-vertical-line{background:#000;height:100px;width:2px}.modal{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:9999}.modal.hidden{display:none}.modal-overlay{backdrop-filter:blur(4px);background:rgba(0,0,0,.5);bottom:0;left:0;position:absolute;right:0;top:0}.modal-content{background:#fff;border-radius:12px;box-shadow:var(--shadow-xl);max-width:600px;overflow:hidden;position:relative;width:90%}.modal-header{align-items:center;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;padding:16px 20px}.modal-header h3{font-size:18px;font-weight:600}.close-btn{background:transparent;border:none;border-radius:6px;color:var(--text-muted);cursor:pointer;font-size:24px;height:32px;transition:all .2s;width:32px}.close-btn:hover{background:var(--bg);color:var(--text)}.modal-body{padding:20px}.modal-body textarea{border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:14px;min-height:180px;outline:none;padding:12px;resize:vertical;transition:all .2s;width:100%}.modal-body textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.1)}.modal-footer{background:var(--bg);border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;padding:16px 20px}.btn-secondary{background:#fff;border:1px solid var(--border);border-radius:8px;color:var(--text);cursor:pointer;font-weight:500;padding:10px 20px;transition:all .2s}.btn-secondary:hover{background:var(--bg)}.btn-primary{background:var(--primary);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:500;padding:10px 20px;transition:all .2s}.btn-primary:hover{background:var(--primary-dark)}.drag-preview{opacity:.7;pointer-events:none}.connection-start{outline:3px dashed var(--warning)!important;outline-offset:2px}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}@media (max-width:1200px){.palette{width:240px}.props{width:280px}}.dropdown-header,.status-bar{justify-content:space-between}.phone-screen,.ui-dropdown,.ui-menu,.ui-navbar,.ui-tabbar{overflow:hidden}.ui-element{background:#fff;border:1px solid #e2e8f0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif}.android-frame,.iphone-frame,.tablet-frame{background:#1e293b;border-radius:40px;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:16px}.slider-thumb,.toggle-thumb{box-shadow:0 2px 4px rgba(0,0,0,.2)}.iphone-frame{height:auto;width:auto}.android-frame,.tablet-frame{border-radius:30px;height:auto;width:auto}.phone-notch{background:#1e293b;border-radius:0 0 20px 20px;height:30px;left:50%;min-width:95px;position:absolute;top:0;transform:translateX(-50%);z-index:10}.phone-screen{background:#fff;border-radius:30px;height:100%;position:relative;width:100%}.ui-button,.ui-input{display:flex;height:44px;min-width:120px}.status-bar{align-items:center;background:#fff;display:flex;font-size:12px;font-weight:500;padding:8px 16px}.time,.ui-button{font-weight:600}.status-icons{display:flex;font-size:11px;gap:6px}.ui-button,.ui-input,.ui-text{font-size:15px}.ui-button{align-items:center;background:var(--primary);border:none;border-radius:8px;color:#fff;cursor:pointer;justify-content:center;transition:.2s}.ui-button:hover{background:var(--primary-dark)}.ui-input{align-items:center;background:#fff;border:2px solid #e2e8f0;border-radius:8px;color:#64748b;padding:0 16px}.ui-text{background:0 0;border:none;color:#0f172a;height:auto;min-width:100px;padding:8px}.dropdown-header,.ui-slider{display:flex;padding:0 16px}.ui-checkbox,.ui-radio{align-items:center;background:0 0;border:none;display:flex;height:40px;min-width:150px}.checkbox-box,.radio-circle{background:#fff;height:22px;width:22px}.checkbox-wrapper,.radio-wrapper{align-items:center;display:flex;gap:10px}.checkbox-box{border:2px solid #cbd5e1;border-radius:4px}.radio-circle{border:2px solid #cbd5e1;border-radius:50%}.ui-toggle{align-items:center;background:0 0;border:none;display:flex;height:50px;justify-content:center;width:80px}.toggle-track{background:#e2e8f0;border-radius:16px;height:32px;position:relative;transition:.2s;width:52px}.toggle-thumb{background:#fff;border-radius:50%;height:28px;left:2px;position:absolute;top:2px;transition:.2s;width:28px}.ui-slider{align-items:center;background:0 0;border:none;height:50px;min-width:120px}.slider-track{background:#e2e8f0;border-radius:3px;height:6px;position:relative;width:100%}.slider-fill{background:var(--primary);border-radius:3px;height:100%;left:0;position:absolute;top:0;width:60%}.slider-thumb{background:#fff;border:3px solid var(--primary);border-radius:50%;height:20px;left:60%;position:absolute;top:50%;transform:translate(-50%,-50%);width:20px}.ui-dropdown{background:#fff;border:2px solid #e2e8f0;border-radius:8px;height:44px;min-width:120px}.dropdown-header{align-items:center;font-size:15px;height:100%}.dropdown-arrow{color:#64748b;font-size:12px}.ui-navbar{background:var(--primary);border:none;border-radius:0;color:#fff;height:60px;min-width:155px}.ui-bottom-nav,.ui-tabbar{background:#fff;border-top:1px solid #e2e8f0;min-width:155px}.navbar-content{align-items:center;display:flex;height:100%;justify-content:space-between;padding:0 20px}.navbar-brand{font-size:20px;font-weight:700}.navbar-items{display:flex;font-size:15px;font-weight:500;gap:24px}.ui-tabbar{border-radius:0;height:80px}.tabbar-content{align-items:center;display:flex;height:100%;justify-content:space-around;padding:8px}.nav-item,.tab-item{cursor:pointer;flex-direction:column;transition:.2s}.bottom-nav-content,.nav-item{display:flex;padding:8px 20px}.tab-item{align-items:center;display:flex;flex:1;gap:4px}.tab-item.active{color:var(--primary)}.tab-icon{font-size:24px}.tab-label{font-size:11px;font-weight:500}.ui-bottom-nav{border-radius:20px 20px 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.1);height:70px}.ui-card,.ui-menu{min-height:100px;min-width:120px}.bottom-nav-content{align-items:center;height:100%;justify-content:space-around;width:auto}.nav-item{align-items:center;border-radius:16px}.menu-item:hover,.nav-item:hover{background:var(--bg)}.nav-icon{font-size:26px}.ui-menu{background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:var(--shadow-lg)}.list-content,.menu-content{display:flex;flex-direction:column}.menu-item{border-bottom:1px solid #f1f5f9;font-size:15px;padding:14px 10px;transition:.2s}.ui-card,.ui-image-card{background:#fff;border:1px solid #e2e8f0;box-shadow:var(--shadow);overflow:hidden}.list-item:last-child,.menu-item:last-child{border-bottom:none}.ui-card{border-radius:12px}.card-header{border-bottom:1px solid #f1f5f9;font-size:18px;font-weight:600;padding:16px 20px}.card-body{color:#64748b;font-size:14px;line-height:1.6;padding:20px}.ui-image-card{border-radius:12px;min-height:80px;min-width:50px}.card-image{align-items:center;background:var(--bg);display:flex;font-size:24px;justify-content:center;min-height:20px;min-width:20px}.ui-container,.ui-list{background:#fff;min-height:90px}.card-content{padding:16px}.card-title{font-size:16px;font-weight:60}.card-text{color:#64748b;font-size:14px}.ui-list{border:1px solid #e2e8f0;border-radius:12px;min-width:120px;overflow:hidden}.ui-alert,.ui-container,.ui-image,.ui-progress,.ui-toast,.ui-video{min-width:100px}.list-item{border-bottom:1px solid #f1f5f9;font-size:15px;padding:14px 20px}.ui-container{align-items:center;border:2px dashed #cbd5e1;border-radius:12px;color:#94a3b8;display:flex;font-size:15px;justify-content:center}.ui-image{background:var(--bg);border:1px solid #e2e8f0;border-radius:12px;min-height:150px;overflow:hidden}.image-placeholder{align-items:center;display:flex;flex-direction:column;font-size:48px;gap:8px;height:100%;justify-content:center;width:100%}.image-text{color:#94a3b8;font-size:14px}.ui-video{background:#1e293b;border:none;border-radius:12px;min-height:100px;overflow:hidden}.video-placeholder{align-items:center;display:flex;font-size:14px;justify-content:center}.ui-icon,.video-controls{align-items:center;display:flex;height:50px}.video-controls{background:rgba(0,0,0,.8);font-size:20px;gap:20px;justify-content:center}.ui-avatar,.ui-icon{background:0 0;border:none}.ui-icon{font-size:32px;justify-content:center;width:50px}.avatar-circle,.ui-avatar{align-items:center;display:flex}.ui-avatar{height:80px;justify-content:center;width:80px}.avatar-circle{background:var(--bg);border:2px solid #e2e8f0;border-radius:50%;font-size:40px;height:100%;justify-content:center;width:100%}.ui-alert{background:#dbeafe;border:1px solid #3b82f6;border-radius:8px;height:60px;overflow:hidden}.alert-content{align-items:center;display:flex;gap:12px;height:100%;padding:0 16px}.alert-icon{font-size:20px}.alert-text{color:#1e3a8a;font-size:14px}.ui-badge,.ui-toast{align-items:center;border:none;color:#fff;display:flex}.ui-toast{background:#1e293b;border-radius:12px;box-shadow:var(--shadow-xl);font-size:14px;height:50px;padding:0 20px}.ui-badge,.ui-toast{justify-content:center}.ui-badge{background:#ef4444;border-radius:50%;font-size:12px;font-weight:700;height:32px;width:32px}.ui-progress,.ui-spinner{align-items:center;display:flex}.ui-progress{background:0 0;border:none;height:40px;padding:0 16px}.progress-track{background:#e2e8f0;border-radius:4px;height:8px;overflow:hidden;width:100%}.progress-fill{background:var(--primary);border-radius:4px;height:100%;transition:width .3s}.ui-spinner{background:0 0;border:none;height:60px;justify-content:center;width:60px}.spinner-ring{animation:spin 1s linear infinite;border:4px solid #e2e8f0;border-radius:50%;border-top:4px solid var(--primary);height:40px;width:40px}@keyframes spin{to{transform:rotate(1turn)}}.ui-search{background:var(--bg);border:1px solid #e2e8f0;border-radius:22px;height:auto;min-width:120px;overflow:hidden}.ui-date,.ui-textarea{background:#fff;min-width:150px}.date-wrapper,.search-wrapper{align-items:center;display:flex;gap:10px;height:100%;padding:0 16px}.search-icon{color:#64748b;font-size:18px}.search-text{color:#94a3b8;font-size:15px}.ui-textarea{color:#64748b;font-size:15px;line-height:1.6;min-height:120px;padding:12px 16px}.ui-date,.ui-textarea{border:2px solid #e2e8f0;border-radius:8px}.ui-date{height:44px;overflow:hidden}.date-icon{font-size:18px}.date-text{color:#64748b;font-size:15px}.menu-container{position:relative}.menu-btn{background:#f3f3f3;border:1px solid #ccc;border-radius:6px;cursor:pointer;font-size:14px;padding:6px 12px}.menu-btn:hover{background:#e7e7e7}.menu-dropdown{background:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 3px 8px rgba(0,0,0,.15);display:none;flex-direction:column;position:absolute;right:0;top:36px;width:140px;z-index:999}.menu-item{background:#fff;border:none;cursor:pointer;font-size:14px;padding:10px;text-align:left}.menu-item:hover{background:#f0f0f0}