.kipin-mockup-container{position:relative;height:700px;width:100%;display:flex;align-items:center;justify-content:center;font-family:"Roboto",sans-serif}.kipin-mockup-container{--kipin-primary:#112fa9;--kipin-secondary:#65d2bb;--kipin-blue:#2c68e8;--kipin-white:#ffffff;--kipin-black:#000000;--kipin-gray-100:#f8fafc;--kipin-gray-200:#e2e8f0;--kipin-gray-300:#cbd5e1;--kipin-gray-400:#94a3b8;--kipin-gray-500:#64748b;--kipin-gray-600:#475569;--kipin-gray-700:#334155;--kipin-gray-800:#1e293b;--kipin-gray-900:#0f172a;--kipin-green-500:#22c55e;--kipin-yellow-500:#eab308;--kipin-red-500:#ef4444;--kipin-radius-sm:0.25rem;--kipin-radius:0.5rem;--kipin-radius-md:0.75rem;--kipin-radius-lg:1rem;--kipin-radius-xl:1.5rem;--kipin-radius-2xl:2rem;--kipin-radius-3xl:3rem;--kipin-shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--kipin-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);--kipin-shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--kipin-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--kipin-shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);--kipin-shadow-2xl:0 25px 50px -12px rgba(0,0,0,0.25)}.kipin-bg-circle{position:absolute;border-radius:50%;z-index:0}.kipin-circle-primary{width:300px;height:300px;background-color:var(--kipin-primary);left:0;top:25%;transition:transform 0.2s ease-out}.kipin-circle-secondary{width:250px;height:250px;background-color:rgba(101,210,187,0.9);right:0;bottom:25%;animation:kipin-pulse 5s infinite alternate}@keyframes kipin-pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}.kipin-web-badge{position:absolute;z-index:30;left:5%;top:50%;transform:translateY(-50%);padding:0.625rem 2rem;background-color:var(--kipin-white);border-radius:9999px;box-shadow:var(--kipin-shadow-lg);display:flex;align-items:center;border:1px solid var(--kipin-secondary);animation:kipin-fadeIn 0.5s ease-out 0.5s both}.kipin-web-badge-highlight{font-weight:700;font-style:italic;color:var(--kipin-blue);font-size:1.125rem}.kipin-web-badge-text{margin-left:0.4rem;font-style:italic;font-size:1.1rem;font-weight:700;color:var(--kipin-gray-500)}@keyframes kipin-fadeIn{from{opacity:0;transform:translateY(-50%) scale(0.8) translateX(-20px)}to{opacity:1;transform:translateY(-50%) scale(1) translateX(0)}}.kipin-system-switcher{position:absolute;z-index:30;left:50%;transform:translateX(-50%);top:-1rem;display:flex;gap:0.5rem}.kipin-system-button{padding:0.25rem 0.75rem;border-radius:9999px;font-size:0.75rem;font-weight:500;border:none;cursor:pointer;transition:all 0.2s ease;background-color:var(--kipin-blue);color:var(--kipin-white);backdrop-filter:blur(4px)}.kipin-system-button:hover{transform:scale(1.05)}.kipin-system-button:active{transform:scale(0.95)}.kipin-system-button.kipin-active{background-color:var(--kipin-white);color:var(--kipin-primary);box-shadow:var(--kipin-shadow-md)}.kipin-phone-mockup{position:relative;z-index:10;width:320px;height:650px;background-color:var(--kipin-black);border-radius:50px;padding:0.75rem;box-shadow:var(--kipin-shadow-2xl);border:5px solid var(--kipin-black);overflow:hidden;opacity:0;animation:kipin-fadeInPhone 0.5s ease-out forwards}@keyframes kipin-fadeInPhone{from{opacity:0}to{opacity:1}}.kipin-phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:33.333%;height:1.75rem;background-color:var(--kipin-black);border-bottom-left-radius:1rem;border-bottom-right-radius:1rem;z-index:30}.kipin-phone-notch-content{position:absolute;top:0.25rem;left:50%;transform:translateX(-50%);width:4rem;height:1rem;background-color:var(--kipin-black);border-bottom-left-radius:1.5rem;border-bottom-right-radius:1.5rem;z-index:30;display:flex;align-items:center;justify-content:center}.kipin-notch-camera{width:0.5rem;height:0.5rem;background-color:var(--kipin-gray-700);border-radius:50%;margin-right:0.5rem}.kipin-notch-speaker{width:1rem;height:0.25rem;background-color:var(--kipin-gray-700);border-radius:9999px}.kipin-side-button{position:absolute;width:2px;background-color:var(--kipin-gray-700)}.kipin-right-button-1{top:6rem;right:-12px;height:2rem;border-top-left-radius:2px;border-bottom-left-radius:2px}.kipin-right-button-2{top:9rem;right:-12px;height:3rem;border-top-left-radius:2px;border-bottom-left-radius:2px}.kipin-left-button-1{top:6rem;left:-12px;height:2rem;border-top-right-radius:2px;border-bottom-right-radius:2px}.kipin-left-button-2{top:140px;left:-12px;height:1.25rem;border-top-right-radius:2px;border-bottom-right-radius:2px}.kipin-left-button-3{top:160px;left:-12px;height:1.25rem;border-top-right-radius:2px;border-bottom-right-radius:2px}.kipin-phone-screen{width:100%;height:100%;background-color:var(--kipin-white);border-radius:38px;overflow:hidden;position:relative}.kipin-app-header{height:4rem;display:flex;align-items:center;padding:0 1rem;background-color:var(--kipin-secondary);transition:background-color 0.5s}.kipin-app-header-content{margin:auto;display:flex;align-items:center}.kipin-app-title{font-weight:700;font-size:1.25rem;color:var(--kipin-primary);transition:color 0.5s}.kipin-app-content{padding:1rem;height:calc(100% - 4rem);position:relative}.kipin-system-content{height:100%;display:none}.kipin-system-content.kipin-active{display:flex;flex-direction:column;animation:kipin-fadeInContent 0.3s ease-out}@keyframes kipin-fadeInContent{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.kipin-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;margin-bottom:1rem}.kipin-stat-card{background-color:var(--kipin-white);padding:0.75rem;border-radius:var(--kipin-radius);box-shadow:var(--kipin-shadow-sm)}.kipin-stat-header{display:flex;align-items:center;color:var(--kipin-primary);margin-bottom:0.25rem}.kipin-stat-header svg{margin-right:0.25rem}.kipin-stat-header span{font-size:0.75rem;font-weight:500}.kipin-stat-value{font-size:1.125rem;font-weight:700}.kipin-info-card{background-color:var(--kipin-gray-100);border-radius:var(--kipin-radius-xl);padding:1rem;box-shadow:var(--kipin-shadow-sm);margin-bottom:1rem}.kipin-info-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;font-weight:500}.kipin-info-header.kipin-small{font-size:0.875rem}.kipin-profit-value{color:var(--kipin-blue);font-weight:700}.kipin-progress-container{position:relative;height:0.5rem;background-color:var(--kipin-gray-200);border-radius:9999px;overflow:hidden}.kipin-progress-bar{position:absolute;top:0;left:0;height:100%;background-color:var(--kipin-secondary);width:0;transition:width 1s}.kipin-info-title{font-weight:500;margin-bottom:0.5rem}.kipin-activity-card{flex:1}.kipin-activity-list{margin-top:0.5rem}.kipin-activity-item{display:flex;align-items:center;margin-bottom:0.75rem}.kipin-activity-icon{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:0.75rem;color:var(--kipin-white)}.kipin-activity-icon.kipin-blue{background-color:var(--kipin-blue)}.kipin-activity-icon.kipin-green{background-color:var(--kipin-secondary)}.kipin-activity-content{flex:1}.kipin-activity-title{font-size:0.875rem;font-weight:500}.kipin-activity-time{font-size:0.75rem;color:var(--kipin-gray-500)}.kipin-real-time{font-size:0.75rem;color:var(--kipin-blue)}.kipin-status-card{background-color:var(--kipin-white);padding:0.75rem;border-radius:var(--kipin-radius);box-shadow:var(--kipin-shadow-sm)}.kipin-status-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem}.kipin-status-header div:first-child{font-size:0.875rem;font-weight:500}.kipin-status-updated{font-size:0.75rem;color:var(--kipin-secondary);font-weight:500}.kipin-container-count{font-size:0.875rem;font-weight:700}.kipin-status-list{margin-top:0.5rem}.kipin-status-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem}.kipin-status-label{display:flex;align-items:center}.kipin-status-dot{width:0.5rem;height:0.5rem;border-radius:50%;margin-right:0.5rem}.kipin-status-dot.kipin-green{background-color:var(--kipin-green-500)}.kipin-status-dot.kipin-blue{background-color:var(--kipin-blue)}.kipin-status-dot.kipin-yellow{background-color:var(--kipin-yellow-500)}.kipin-status-dot.kipin-gray{background-color:var(--kipin-gray-500)}.kipin-status-label span:last-child{font-size:0.75rem}.kipin-status-count{font-size:0.75rem;font-weight:500}.kipin-tracking-card{flex:1}.kipin-tracking-container{background-color:var(--kipin-white);padding:0.75rem;border-radius:var(--kipin-radius);box-shadow:var(--kipin-shadow-sm)}.kipin-tracking-header{display:flex;align-items:center;margin-bottom:0.5rem}.kipin-tracking-header svg{color:var(--kipin-blue);margin-right:0.5rem}.kipin-tracking-header div{font-size:0.875rem;font-weight:500}.kipin-tracking-timeline{margin-top:0.75rem}.kipin-timeline-item{position:relative;padding-left:1.5rem;margin-bottom:0.75rem}.kipin-timeline-line{position:absolute;left:0.5rem;top:0;bottom:0;width:0.125rem;background-color:var(--kipin-gray-200)}.kipin-timeline-dot{position:absolute;left:0;top:0;width:1rem;height:1rem;border-radius:50%;border:2px solid var(--kipin-white)}.kipin-timeline-dot.kipin-green{background-color:var(--kipin-secondary)}.kipin-timeline-dot.kipin-blue{background-color:var(--kipin-blue)}.kipin-timeline-dot.kipin-gray{background-color:var(--kipin-gray-200)}.kipin-timeline-content{padding-left:0.5rem}.kipin-timeline-title{font-size:0.75rem;font-weight:500}.kipin-timeline-time{font-size:0.75rem;color:var(--kipin-gray-500)}.kipin-chart-container{height:4rem;position:relative;overflow:hidden;border-radius:var(--kipin-radius);background-color:var(--kipin-gray-100);margin-top:0.5rem}.kipin-bar-chart{position:absolute;inset:0;display:flex;align-items:flex-end}.kipin-chart-bar{flex:1;background-color:var(--kipin-blue);margin:0 1px;border-top-left-radius:2px;border-top-right-radius:2px;animation:kipin-barAnimation 2s infinite alternate}@keyframes kipin-barAnimation{from{height:20%}to{height:var(--height,80%)}}.kipin-map-card{flex:1}.kipin-map-container{background-color:var(--kipin-white);padding:0.75rem;border-radius:var(--kipin-radius);box-shadow:var(--kipin-shadow-sm);height:10rem;position:relative;overflow:hidden}.kipin-map-grid{position:absolute;inset:0;background-color:var(--kipin-gray-100);background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 20 0 L 0 0 0 20' fill='none' stroke='%232C68E8' stroke-width='0.5' stroke-opacity='0.1'/%3E%3C/svg%3E")}.kipin-map-continents{position:absolute;inset:0}.kipin-map-points{position:absolute;inset:0}.kipin-map-point{position:absolute;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--kipin-blue);animation:kipin-pointPulse 2s infinite}@keyframes kipin-pointPulse{0%{transform:scale(1);opacity:0.7}50%{transform:scale(1.5);opacity:1}100%{transform:scale(1);opacity:0.7}}.kipin-map-counter{position:absolute;bottom:0.5rem;right:0.5rem;background-color:rgba(255,255,255,0.8);border-radius:var(--kipin-radius-sm);padding:0.25rem 0.5rem;font-size:0.75rem;font-weight:500}.kipin-notification{position:absolute;bottom:1rem;left:1rem;right:1rem;background-color:var(--kipin-blue);color:var(--kipin-white);padding:0.75rem;border-radius:var(--kipin-radius);box-shadow:var(--kipin-shadow-lg);transform:translateY(100%);opacity:0;transition:transform 0.3s,opacity 0.3s;z-index:20}.kipin-notification.kipin-show{transform:translateY(0);opacity:1}.kipin-notification-content{display:flex;align-items:flex-start}.kipin-notification-icon{background-color:var(--kipin-white);border-radius:100%;padding:0.5rem;margin-right:0.5rem;margin:auto;display:flex;color:var(--kipin-blue)}.kipin-notification-text{flex:1}.kipin-notification-title{font-size:0.875rem;font-weight:800}.kipin-notification-message{font-size:0.75rem}.kipin-notification-close{width:1.25rem;height:1.25rem;border-radius:50%;background-color:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:0.75rem;cursor:pointer}.kipin-notification-close:hover{transform:scale(1.1)}.kipin-home-indicator{position:absolute;bottom:0.25rem;left:50%;transform:translateX(-50%);width:33.333%;height:0.25rem;background-color:var(--kipin-gray-300);border-radius:9999px}.kipin-floating-cards{position:absolute;z-index:20}.kipin-floating-card{position:absolute;border-radius:var(--kipin-radius-lg);box-shadow:var(--kipin-shadow-xl);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:translateX(-50px) scale(0.8);transition:opacity 0.5s,transform 0.5s}.kipin-floating-card.kipin-show{opacity:1;transform:translateX(0) scale(1)}.kipin-floating-card.kipin-primary{width:120px;height:120px;background-color:var(--kipin-primary);left:100px;bottom:24px;color:var(--kipin-white);box-shadow:0 0 20px 5px rgba(17,47,169,0.3),0 8px 16px rgba(17,47,169,0.2)}.kipin-floating-card.kipin-blue{width:120px;height:120px;background-color:var(--kipin-blue);left:104px;bottom:40px;color:var(--kipin-white);box-shadow:0 0 20px 5px rgba(44,104,232,0.3),0 8px 16px rgba(44,104,232,0.2)}.kipin-floating-card.kipin-white{width:140px;height:180px;background-color:var(--kipin-white);left:104px;bottom:32px;padding:1rem;box-shadow:0 0 25px 8px rgba(101,210,187,0.2),0 8px 16px rgba(44,104,232,0.15)}.kipin-card-content{text-align:center;font-size:0.75rem;font-weight:500;margin-top:0.5rem}.kipin-card-content.kipin-full{width:100%}.kipin-card-value{font-size:1.5rem;font-weight:700;margin-top:0.25rem}.kipin-card-label{color:var(--kipin-gray-500);font-size:0.75rem;margin-bottom:0.5rem}.kipin-card-profit{color:var(--kipin-primary);font-weight:700;font-size:1.25rem;margin-bottom:0.5rem}.kipin-donut-chart-container{position:relative;height:5rem;width:5rem;margin:0.5rem auto}.kipin-donut-chart{width:100%;height:100%}.kipin-notification-dot{position:absolute;z-index:10;width:0.5rem;height:0.5rem;border-radius:50%;animation:kipin-dotPulse 2s infinite}.kipin-dot1{left:15%;top:33%;background-color:var(--kipin-secondary);animation-delay:0s}.kipin-dot2{right:15%;top:67%;background-color:var(--kipin-blue);animation-delay:0.5s}.kipin-dot3{left:13%;bottom:25%;background-color:var(--kipin-primary);animation-delay:1s}.kipin-dot4{right:33%;top:25%;background-color:var(--kipin-secondary);animation-delay:1.5s}@keyframes kipin-dotPulse{0%{transform:scale(1);opacity:0.2}50%{transform:scale(1.5);opacity:1}100%{transform:scale(1);opacity:0.2}}@media (max-width:768px){.kipin-web-badge{left:5%}.kipin-floating-card.kipin-primary,.kipin-floating-card.kipin-blue,.kipin-floating-card.kipin-white{display:none}}