*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.app,body{min-height:100vh}.app{align-items:center;display:flex;justify-content:center;padding:20px}.demo-container{background:#fff;border-radius:2px;box-shadow:0 20px 60px #0000004d;max-width:800px;padding:40px;width:100%}h1{color:#333;font-size:32px;margin-bottom:30px;text-align:center}h2{color:#555;font-size:20px;margin-bottom:15px}h3{color:#666;font-size:18px;margin-bottom:10px}.control-section{margin-bottom:30px}.position-grid{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}.position-btn{background:#fff;border:2px solid #e5e7eb;border-radius:2px;color:#555;cursor:pointer;font-size:14px;font-weight:500;padding:12px 20px;transition:all .2s}.position-btn:hover{border-color:#667eea;color:#667eea;transform:translateY(-2px)}.position-btn.active{background:#667eea;border-color:#667eea;color:#fff}.button-group{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}.btn{border:none;border-radius:2px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;letter-spacing:.5px;padding:14px 24px;text-transform:uppercase;transition:all .2s}.btn:hover{box-shadow:0 4px 12px #0003;transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn-success{background:#10b981}.btn-success:hover{background:#059669}.btn-error{background:#ef4444}.btn-error:hover{background:#dc2626}.btn-warning{background:#f59e0b}.btn-warning:hover{background:#d97706}.btn-info{background:#3b82f6}.btn-info:hover{background:#2563eb}.info-section{background:#f9fafb;border-radius:2px;margin-top:20px;padding:20px}.info-section ul{color:#666;margin-left:20px}.info-section li{line-height:1.6;margin-bottom:8px}@media(max-width:640px){.demo-container{padding:20px}h1{font-size:24px}.position-grid{grid-template-columns:repeat(2,1fr)}.button-group{grid-template-columns:1fr}}.toast-container{display:flex;flex-direction:column;gap:10px;max-width:400px;pointer-events:none;position:fixed;z-index:9999}.toast-container-top-left{left:20px;top:20px}.toast-container-top-center{left:50%;top:20px;transform:translate(-50%)}.toast-container-top-right{right:20px;top:20px}.toast-container-bottom-left{bottom:20px;left:20px}.toast-container-bottom-center{bottom:20px;left:50%;transform:translate(-50%)}.toast-container-bottom-right{bottom:20px;right:20px}.toast{background:#fff;border-left:4px solid;border-radius:2px;box-shadow:0 4px 12px #00000026;cursor:pointer;max-width:400px;min-width:300px;padding:10px;pointer-events:auto;transition:all .3s ease}.toast:hover{box-shadow:0 6px 16px #0003;transform:translateY(-2px)}.toast-content{align-items:center;display:flex;gap:12px}.toast-icon{flex-shrink:0;font-size:20px;font-weight:700}.toast-message{color:#333;flex:1;font-size:14px}.toast-close{align-items:center;background:none;border:none;color:#999;cursor:pointer;display:flex;flex-shrink:0;font-size:24px;height:24px;justify-content:center;padding:0;transition:color .2s;width:24px}.toast-close:hover{color:#333}.toast-success{border-left-color:#10b981}.toast-success .toast-icon{color:#10b981}.toast-error{border-left-color:#ef4444}.toast-error .toast-icon{color:#ef4444}.toast-warning{border-left-color:#f59e0b}.toast-warning .toast-icon{color:#f59e0b}.toast-info{border-left-color:#3b82f6}.toast-info .toast-icon{color:#3b82f6}.toast-loading{border-left-color:#8b5cf6}.toast-loading .toast-icon{color:#8b5cf6}.toast-container-top-center .toast-enter,.toast-container-top-left .toast-enter,.toast-container-top-right .toast-enter{animation:slideInTop .3s ease forwards}.toast-container-top-center .toast-exit,.toast-container-top-left .toast-exit,.toast-container-top-right .toast-exit{animation:slideOutTop .3s ease forwards}.toast-container-bottom-center .toast-enter,.toast-container-bottom-left .toast-enter,.toast-container-bottom-right .toast-enter{animation:slideInBottom .3s ease forwards}.toast-container-bottom-center .toast-exit,.toast-container-bottom-left .toast-exit,.toast-container-bottom-right .toast-exit{animation:slideOutBottom .3s ease forwards}@keyframes slideInTop{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes slideOutTop{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}@keyframes slideInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slideOutBottom{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}:root{--overlay: rgba(0,0,0,.35);--overlay-strong: rgba(0,0,0,.6);--bg: #ffffff;--header-bg: #f5f5f5;--header-color: #000;--modal-z: 60000}[data-theme=light]{--overlay: rgba(0,0,0,.35);--overlay-strong: rgba(0,0,0,.6);--bg: #ffffff;--header-bg: #f5f5f5;--header-color: #000}[data-theme=dark]{--overlay: rgba(0,0,0,.6);--overlay-strong: rgba(0,0,0,.85);--bg: #2c2c2c;--header-bg: #3a3a3a;--header-color: #f1f1f1}.app-root{max-width:900px;margin:0 auto}button{cursor:pointer}.modal-overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:flex-start;justify-content:center;padding:40px;z-index:60000;opacity:0;transition:opacity .2s ease;pointer-events:none}.modal-overlay.visible{opacity:1;pointer-events:auto}.modal-overlay-fullscreen{padding:0}.modal-overlay.drawer-overlay{padding:0;background:var(--overlay-strong)}.modal{z-index:60001;background:var(--bg);min-width:300px;border-radius:2px;box-shadow:0 10px 30px #0000004d;overflow:hidden;display:flex;flex-direction:column;resize:both;max-width:90vw;max-height:90vh;position:absolute;opacity:0;transform:translateY(-20px) scale(.85) rotate(-4deg);transition:opacity .25s ease,transform .25s ease}.modal.overflowing:after{content:"↘";position:absolute;right:8px;bottom:8px;font-size:.75rem;color:var(--header-color);cursor:se-resize;pointer-events:none}.modal.visible{opacity:1;transform:translateY(0) scale(1) rotate(0)}.modal-fullscreen{width:100%!important;height:100%!important;min-width:0;max-width:none;max-height:none;border-radius:0;resize:none}.drawer{position:absolute;z-index:60001;background:var(--bg);min-width:300px;border-radius:2px;box-shadow:0 10px 30px #0000004d;overflow:hidden;max-width:100%;max-height:100%;opacity:0;transform:translate(0);transition:opacity var(--drawer-transition, .45s) ease,transform var(--drawer-transition, .45s) ease}.drawer.horizontal{height:100%}.drawer.vertical{width:100%}.drawer.horizontal.side-left{transform:translate(-100%)}.drawer.horizontal.side-right{transform:translate(100%)}.drawer.vertical.side-top{transform:translateY(-100%)}.drawer.vertical.side-bottom{transform:translateY(100%)}.drawer.visible{opacity:1}.drawer.visible.horizontal.side-left,.drawer.visible.horizontal.side-right{transform:translate(0)}.drawer.visible.vertical.side-top,.drawer.visible.vertical.side-bottom{transform:translateY(0)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--header-bg);color:var(--header-color);cursor:grab}.modal-title{font-weight:600}.modal-actions{display:flex;align-items:center;gap:2px}.modal-fullscreen-toggle,.modal-close{border:none;background:transparent;color:inherit;padding:4px 8px}.modal-fullscreen-toggle svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.modal-close{font-size:18px}.modal-body{padding:12px;max-height:80vh;overflow:auto;flex:1 1 auto}.modal-fullscreen .modal-body{max-height:none}@media(max-width:480px){.modal{min-width:260px}}