/* Site layout styles: header / main / footer
   - header/footer은 자연높이
   - main은 화면 전체 높이를 채우도록 함 (헤더/푸터 제외)
*/

:root {
    --header-height: 64px;
    --footer-height: 48px;
    --bg: #ffffff;
    --muted: #6b7280;
}

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0px;
}
html, body, div {
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    font-weight: 600;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

/* .site는 전체 높이를 차지하는 wrapper */
.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow-x: hidden;
}

.site-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e6e9ef;
    background: #fff;
}

.site-main {
    flex: 1 0 auto;
    /* 남은 공간을 채움 */
    display: flex;
    flex-direction: column; /* <-- 추가: 섹션들을 세로로 쌓기 위해 */
    align-items: stretch;
    justify-content: flex-start; /* 상단부터 콘텐츠 배치 */
    padding: 0px;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.site-footer {
    width: 100%;
    background: #0f0f0f;
    color: #ffffff;
    padding: 60px 0 40px;
}

.brand {
    font-weight: 700;
    padding-left: 12px;
}

/* 보조: 모바일/데스크탑 반응형 예시 */
@media (min-width: 768px) {
    .site-footer {
    }
}

/* --- Header specific styles --- */
.topbar {
    background: #2b2b2b;
    color: #fff;
    font-size: 14px;
    padding: 0px 0;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 0 20px;
    max-width: 1280px;
    margin: 0 auto;
}

.topbar .announce {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #10C876;
    position: relative;
    overflow: hidden;
    height: 40px;
    padding: 10px 0;
}

.topbar .announce .ai-icon {
    width: 67px;
    height: 68px;
    object-fit: contain;
    margin-top: 10px;
}

.topbar-actions {
    display: flex;
    gap: 10px;
    padding: 10px 0;
}

.topbar-actions .btn {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary {
    background: #7C3AED;
    color: #fff;
    border: none;
}

.btn-primary:hover {
    background: #6D28D9;
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mainbar {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    height: 70px;
    display: flex;
    align-items: center;
}

.mainbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

.logo {
    display: flex;
    align-items: center;
}

.logo .logo-img {
    height: 28px;
    display: block;
}

.main-nav {
    display: flex;
    gap: 32px;
    margin: 0 40px;
}

.nav-item {
    position: relative;
}

.nav-item > a {
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
}

.nav-item > a img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.nav-item > a:hover {
    color: #7C3AED;
}

/* Dropdown indicator for items with submenu */
.nav-item.has-dropdown > a::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.nav-item.has-dropdown:hover > a::after {
    transform: rotate(180deg);
}

/* Dropdown menu */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
    min-width: 180px;
    margin-top: 10px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
}

.nav-item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    margin-top: 5px;
}

.dropdown-link {
    display: block;
    padding: 10px 20px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.2s ease;
}

.dropdown-link:hover {
    background: #f3f4f6;
    color: #7C3AED;
}

.actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.actions .icon-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    color: #6b7280;
    transition: color 0.3s ease;
}

.actions .icon-btn:hover {
    color: #374151;
}

.actions .icon-btn img {
    width: 20px;
    height: 20px;
}

/* Language Dropdown */
.lang-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-dropdown img {
    width: 20px;
    height: 20px;
}

.lang-dropdown select {
    padding: 8px 32px 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    font-size: 14px;
    color: #374151;
    outline: none;
    transition: border-color 0.2s;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    min-width: 120px;
}

.lang-dropdown select:hover {
    border-color: #d1d5db;
}

.lang-dropdown select:focus {
    border-color: #6366f1;
}

.lang-dropdown select option {
    padding: 8px;
    background: white;
    color: #374151;
}

/* Old lang-btn styles kept for backward compatibility */
.actions .lang-btn {
    background: transparent;
    border: 1px solid #e7e7eb;
    border-radius: 6px;
    cursor: pointer;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    color: #6b7280;
}

.actions .lang-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.actions .lang-btn img {
    width: 20px;
    height: 20px;
}

.actions .lang-btn .dropdown-arrow {
    transition: transform 0.2s ease;
}

.lang-dropdown.active .lang-btn .dropdown-arrow {
    transform: rotate(180deg);
}

.lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
    min-width: 150px;
    display: none;
    z-index: 1000;
}

.lang-menu.active {
    display: block;
}

.lang-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s ease;
    cursor: pointer;
}

.lang-item:hover {
    background: #f3f4f6;
}

.lang-item.active {
    color: #7C3AED;
    font-weight: 600;
}

.lang-item .checkmark {
    width: 20px;
    margin-right: 8px;
    color: #7C3AED;
    font-size: 14px;
}

.login-btn {
    padding: 10px 24px;
    background: #111827;
    color: #fff;
    border-radius: 24px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.3s ease;
}

.login-btn:hover {
    background: #1f2937;
}

/* Hamburger menu button */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #374151;
    transition: all 0.3s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile menu overlay */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.mobile-menu.active {
    display: block;
}

.mobile-menu-content {
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    height: 100%;
    background: #fff;
    padding: 20px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-menu.active .mobile-menu-content {
    transform: translateX(0);
}

.mobile-menu-close {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px;
}

.mobile-menu-close button {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.mobile-menu nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mobile-menu nav > a {
    color: #374151;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
    display: block;
}

.mobile-nav-item {
    border-bottom: 1px solid #e5e7eb;
}

.mobile-nav-item .has-submenu {
    color: #374151;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 0;
    display: block;
    position: relative;
}

.mobile-nav-item .has-submenu::after {
    content: '▼';
    position: absolute;
    right: 0;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.mobile-nav-item .has-submenu.active::after {
    transform: rotate(180deg);
}

.mobile-submenu {
    display: none;
    background: #f9fafb;
    padding: 8px 0 8px 20px;
}

.mobile-submenu.active {
    display: block;
}

.mobile-submenu a {
    display: block;
    padding: 8px 0;
    color: #6b7280;
    text-decoration: none;
    font-size: 14px;
}

.mobile-submenu a:hover {
    color: #7C3AED;
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .topbar-inner {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        text-align: center;
    }
    
    .topbar .announce {
        display: none;
    }

    .topbar-actions {
        display: flex;
        gap: 8px;
        justify-content: center;
    }

    .main-nav {
        display: none;
    }

    .mainbar-inner {
        padding: 0 16px;
    }

    .actions .icon-btn,
    .actions .lang-btn,
    .actions .login-btn {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Small mobile adjustments */
@media (max-width: 640px) {
    .topbar {
        font-size: 12px;
        padding: 8px 0;
    }
    
    .topbar-actions .btn {
        padding: 4px 10px;
        font-size: 11px;
    }
}

/* Floating side layer */
.floating-layer {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 998;
    animation: slideInRight 0.5s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateY(-50%) translateX(100px);
        opacity: 0;
    }

    to {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
}

.floating-menu {
    background: #ffffff;
    border-radius: 10px 0px 0px 10px;
    border: 1px solid #e6eaed;
    border-right: none;
    padding: 20px 15px;
    box-shadow: 0px 3px 20px 0px rgba(40, 39, 47, 0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.floating-menu:hover {
    box-shadow: 0px 5px 30px 0px rgba(40, 39, 47, 0.15);
    transform: translateX(-3px);
}

.floating-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    padding: 2px 4px;
    border-radius: 4px;
    text-decoration: none; /* 링크 밑줄 제거 */
    color: inherit; /* 부모 색상 상속 */
}

.floating-item:hover {
    background: rgba(124, 58, 237, 0.05);
    text-decoration: none; /* 호버 시에도 밑줄 제거 */
    color: inherit; /* 색상 변경 방지 */
}

.floating-item:hover .floating-label {
    color: #7C3AED;
    font-weight: 600;
}

.floating-item:hover .floating-icon {
    transform: scale(1.1);
}

/* 방문한 링크 스타일도 기본과 동일하게 유지 */
.floating-item:visited {
    color: inherit;
    text-decoration: none;
}

/* 활성 상태에서도 스타일 유지 */
.floating-item:active {
    color: inherit;
    text-decoration: none;
}

/* ...existing code... */

/* Carousel Styles */
.carousel-section {
    width: 100%;
    padding-top: 24px;
    position: relative;
    overflow: hidden;
}

.carousel-container {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.carousel-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 43.83%;
    /* 526/1200 = 0.4383 = 43.83% for aspect ratio */
    height: 0;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    background: url('/assets/images/home/carousel/slider-bg-1.jpg') center/cover no-repeat;
    border-radius: 20px;
    overflow: hidden;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-slide:nth-child(2) {
    /* background: url('/assets/images/home/carousel/slider-bg-1.jpg') center/cover no-repeat; */
    background: #6AD579;
}

.carousel-slide:nth-child(3) {
    /* background: url('/assets/images/home/carousel/slider-bg-1.jpg') center/cover no-repeat; */
    background: linear-gradient(103deg, #77C2FF 10.14%, #31A2FF 95.06%);
}

.slide-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0px;
    position: relative;
}

.slide-text {
    flex: 1;
    max-width: 66.67%;
    /* 800/1200 = 0.6667 = 66.67% to balance with image */
    padding-left: 40px;
    z-index: 2;
}

.slide-title {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 20px;
    animation: fadeInUp 0.8s ease;
}

.slide-description {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 30px;
    animation: fadeInUp 1s ease;
}

.slide-buttons {
    display: flex;
    gap: 15px;
    animation: fadeInUp 1.2s ease;
    align-items: center;
    flex-wrap: wrap;
}

.slide-image {
    width: 33.33%;
    /* 400/1200 = 0.3333 = 33.33% */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-right: 8%;
}

.physical-ai-label {
    position: absolute;
    top: -20px;
    right: 20px;
    width: 150px;
    height: auto;
    z-index: 10;
    animation: float 4s ease-in-out infinite;
    animation-delay: 0.5s;
}

.robot-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: auto;
    animation: float 3s ease-in-out infinite;
}

.robot-container img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
}

.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 350px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: rotate 20s linear infinite;
}

.floating-element {
    position: absolute;
    animation: float 4s ease-in-out infinite;
}

.star-1 {
    top: 20%;
    left: 10%;
    font-size: 24px;
    animation-delay: 0s;
}

.star-2 {
    top: 60%;
    right: -5%;
    font-size: 20px;
    animation-delay: 1s;
}

.dot-1 {
    top: 20%;
    right: 10%;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation-delay: 0.5s;
}

.dot-2 {
    bottom: 30%;
    left: 0%;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation-delay: 1.5s;
}

/* Carousel Controls */
.carousel-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 10;
    background: #ffffff;
    padding: 12px 20px;
    border-radius: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.carousel-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #374151;
    font-size: 16px;
    font-weight: 600;
}

.carousel-pagination .current-page {
    color: #111827;
    font-weight: 700;
}

.carousel-pagination .separator {
    color: #9ca3af;
}

.carousel-pagination .total-pages {
    color: #6b7280;
}

.carousel-arrows {
    display: flex;
    gap: 8px;
}

.arrow-prev,
.arrow-next {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #111827;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.arrow-prev:hover,
.arrow-next:hover {
    background: #374151;
    transform: scale(1.1);
}

.frame-1261159476,
.frame-1261159476 * {
    box-sizing: border-box;
}

.frame-1261159476 {
    background: #ffffff;
    border-radius: 40px;
    padding: 7px 15px 7px 7px;
    display: inline-flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    text-decoration: none;
    height: 60px;
}

.frame-2147228455 {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.group-48101552 {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    position: relative;
}

.rectangle-34626846 {
    background: #ffe4e4;
    border-radius: 50px;
    width: 46px;
    height: 46px;
    position: absolute;
    left: 0px;
    top: 0px;
}
.rectangle-34626846-2 {
  background: #f1e8ff;
  border-radius: 50px;
  width: 46px;
  height: 46px;
  position: absolute;
  left: 0px;
  top: 0px;
}.rectangle-34626846-3 {
  background: #e8edff;
  border-radius: 50px;
  width: 46px;
  height: 46px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.free-trial-icon {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 8px;
    top: 8px;
}
.video-icon {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 8px;
  top: 8px;
}

.group-48101584 {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible;
}

.carousel-link-text {
    color: #000000;
    text-align: left;
    font-family: "Pretendard-Medium", sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    position: relative;
}

.next {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
}


/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .carousel-container {
        margin: 0 20px;
    }
}

@media (max-width: 768px) {
    .carousel-wrapper {
        padding-bottom: 70%;
        /* Taller aspect ratio on mobile */
    }

    .slide-content {
        flex-direction: column;
        padding: 30px 20px;
    }

    .slide-text {
        max-width: 100%;
        padding-right: 0;
        text-align: center;
    }

    .slide-image {
        width: 100%;
        margin-top: 20px;
    }

    .slide-title {
        font-size: 28px;
    }

    .slide-description {
        font-size: 14px;
    }

    .robot-container {
        max-width: 250px;
    }

    .quick-menu {
        display: none;
    }

    .carousel-controls {
        bottom: 15px;
        right: 15px;
        padding: 8px 15px;
    }

    .carousel-pagination {
        font-size: 14px;
    }

    .arrow-prev,
    .arrow-next {
        width: 30px;
        height: 30px;
    }
}

/* Footer Styles */
.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 60px;
}

.footer-left {
    flex: 1;
    display: flex;
    gap: 40px;
}

.footer-logo img {
    height: 28px;
}

.footer-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.footer-nav a:hover {
    color: #ffffff;
}

.footer-nav .divider {
    color: #4b5563;
    font-size: 12px;
}

.footer-address {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.company-info,
.contact-info {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: #ffffff;
}

.company-info .label,
.contact-info .label {
    color: #6b7280;
    min-width: 40px;
}

.footer-copyright {
    margin-top: 20px;
}

.footer-copyright p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 30px;
}

.social-links {
    display: flex;
    gap: 12px;
}

.social-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1f2937;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    text-decoration: none;
    transition: all 0.3s;
}

.social-icon:hover {
    background: #374151;
    color: #ffffff;
    transform: translateY(-2px);
}

.social-icon svg {
    width: 18px;
    height: 18px;
}

.social-icon.news {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.footer-notice {
    text-align: right;
}

.footer-notice p {
    font-size: 13px;
    line-height: 1.6;
    color: #ffffff;
    margin: 0;
}

/* Footer Responsive */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .footer-left {
        flex-direction: column;
    }
    
    .footer-right {
        align-items: flex-start;
    }
    
    .footer-notice {
        text-align: left;
    }
    
    .social-links {
        flex-wrap: wrap;
    }
}

/* Education Section Styles */
.education-section {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 150px 0;
    overflow: hidden;
    background: radial-gradient(155.55% 122.09% at 50% 0%, #B43FFF 0%, #4D038E 100%);
}

.education-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0px;
    position: relative;
    display: flex;
    align-items: flex-start;
}

.education-header {
    text-align: left;
    position: relative;
    flex-shrink: 0;
    width: 400px;
    padding-left: 10px;
}

.badge-highlight {
    position: absolute;
    top: -70px;
    display: inline-flex;
    align-items: center;
    background: url('/assets/images/home/education/block-label.svg') no-repeat;
    background-size: cover;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0px;
}

.badge-highlight img {
    width: 16px;
    height: 16px;
}

.education-title {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    padding: 0px;
    margin: 0px 0px 50px 0px;
}

.education-subtitle {
    font-size: 20px;
    color: #ffffff;
    opacity: 0.9;
    font-weight: 400;
    margin-bottom: 40px;
}

.education-cards {
    display: flex;
    gap: 24px;
    flex: 1;
}

.education-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 25px;
    flex: 1;
    min-width: 220px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.education-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.education-card .card-icon {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.education-card .card-icon img {
    width: 100%;
    object-fit: contain;
}

.education-card .card-title {
    font-size: 22px;
    font-weight: 700;
    color: #000000;
    margin: 0px 0px 40px 0px;
    padding: 10px 0px;
}

.card-description {
    font-size: 15px;
    font-weight: 400;
    color: #000000;
    line-height: 1.6;
    flex: 1;
}

.card-phone {
    font-size: 26px;
    font-weight: 800;
    color: #000000;
    margin-top: 10px;
    flex: 1;
    letter-spacing: -0.5px;
}

.card-arrow-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.card-arrow-btn:hover {
    background: #a94dff;
    transform: scale(1.1);
}

.card-arrow-btn svg {
    width: 24px;
    height: 24px;
}

.education-logo {
    width: 120px;
    height: 120px;
    animation: float 3s ease-in-out infinite;
}

.education-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* AI Programming Section Styles */
.ai-programming-section {
    padding: 80px 0;
    background: #ffffff;
}

.ai-programming-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-header {
    text-align: left;
    margin-bottom: 60px;
}

.artibo-logo {
    display: inline-block;
}

.section-title {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    line-height: 1.5;
}

.section-title .highlight {
    color: #7C3AED;
    font-weight: 700;
}

.section-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: stretch;
}

.content-left {
    position: relative;
    height: 100%;
    background: url('/assets/images/home/aiprogramming/aiprogramming-img-2.webp') center/cover no-repeat;
    border-radius: 20px;
    overflow: hidden;
}

.video-container {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.video-preview {
    width: 100%;
    border-radius: 12px;
    display: block;
}

.video-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 20px;
    color: #ffffff;
    padding: 20px;
    border-radius: 12px 12px 0 0;
}

.star-badge {
    background: url('/assets/images/icon/icon-star.svg') no-repeat center/contain;
    color: #000;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.overlay-text {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 10px;
}

.bottom-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000000;
    color: #ffffff;
    padding: 20px;
    font-size: 13px;
    line-height: 2;
    border-radius: 0 0 20px 20px;
}

.bottom-text .badge {
    display: inline-block;
    width: 80px;
    text-align: center;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    background: #ffffff;
    color: #6E33F6;
    margin-right: 8px;
    margin-bottom: 4px;
    line-height: 1.5;
}

.content-right {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ai-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ai-card {
    background: #F1F4F9;
    border-radius: 20px;
    padding: 25px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 170px;
}

.ai-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* card-number removed - merged with card-title */

.ai-card .card-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 64px;
    height: 64px;
    background: #E8E2FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-card:nth-child(2) .card-icon {
    background: #E0F2FE;
}

.ai-card:nth-child(3) .card-icon {
    background: #FFE4F1;
}

.ai-card:nth-child(4) .card-icon {
    background: #D1FAE5;
}

.ai-card:nth-child(5) .card-icon {
    background: #FED7AA;
}

.ai-card .card-icon img {
    width: 36px;
    height: 36px;
}

.ai-card .card-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
    text-align: left;
}

.ai-card .card-subtitle {
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    color: #8B7FCF;
    margin-bottom: auto;
    text-align: left;
}

.ai-card:nth-child(1) .card-subtitle {
    color: #8B7FCF;
}

.ai-card:nth-child(2) .card-subtitle {
    color: #3B82F6;
}

.ai-card:nth-child(3) .card-subtitle {
    color: #EC4899;
}

.ai-card:nth-child(4) .card-subtitle {
    color: #10B981;
}

.ai-card:nth-child(5) .card-subtitle {
    color: #F59E0B;
}

.ai-card .card-link {
    display: block;
    text-align: left;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    margin-top: auto;
    padding-top: 20px;
}

.ai-programming-robot-image {
    position: absolute;
    bottom: -40px;
    right: -130px;
    width: 320px;
    height: 320px;
    z-index: 10;
}

.ai-programming-robot-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: float 5s ease-in-out infinite;
}

/* AI Programming Section Responsive */
@media (max-width: 1024px) {
    .section-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .ai-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .ai-card:nth-child(5) {
        grid-column: span 3;
    }
    
    .ai-programming-robot-image {
        display: none;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 24px;
    }
    
    .ai-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .ai-card:nth-child(5) {
        grid-column: span 1;
    }
}

/* Core Features Section Styles */
.core-features-section {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 100px 0;
    background: #ffffff url('/assets/images/home/features/feature-bg.webp') center/contain no-repeat;
    overflow: hidden;
}

.core-features-section::before {
    content: '';
    position: absolute;
    top: 50;
    right: 0;
    width: 400px;
    height: 400px;
    background: url('/assets/images/home/features/feature-bg-2.png') no-repeat;
    background-size: contain;
    background-position: top right;
    z-index: 0;
}

.core-features-section::after {
    content: '';
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 400px;
    height: 400px;
    background: url('/assets/images/home/features/feature-bg-3.png') no-repeat;
    background-size: contain;
    background-position: bottom left;
    z-index: 0;
}

.core-features-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.features-header-cell {
    grid-column: span 2;
    text-align: left;
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.features-badge {
    display: inline-block;
    background: #7C3AED;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
    width: fit-content;
}

.features-title {
    font-size: 36px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    padding: 0px;
    margin: 0px 0px 16px 0px;
}

.features-title .highlight-purple {
    color: #7C3AED;
}

.features-description {
    font-size: 16px;
    color: #000000;
    line-height: 1.6;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    z-index: 2;
}

.empty-cell {
    /* Empty placeholder for grid positioning */
}

.feature-card {
    background: #ffffff;
    border: 1px solid #E8EAEF;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    padding: 30px 20px 25px;
    text-align: left;
    transition: all 0.3s ease;
    position: relative;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border-color: #D1D5DB;
}

.feature-card.active {
    border: 2px solid #3B82F6;
    background: #F0F9FF;
}

.feature-card .card-icon {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: auto;
}

.feature-card .card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-card .card-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    padding: 0px;
    margin: 0px 0px 6px 0px;
    letter-spacing: -0.02em;
}

.feature-card .card-desc {
    font-size: 15px;
    color: #8B92A3;
    line-height: 1.4;
    font-weight: 400;
}

.features-background-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.05) 0%, transparent 70%);
    z-index: 1;
}

/* Core Features Responsive */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .features-header-cell {
        grid-column: span 3;
        text-align: center;
        padding-right: 0;
        margin-bottom: 40px;
    }
    
    .features-badge {
        margin: 0 auto 20px;
    }
    
    .empty-cell {
        display: none;
    }
}

@media (max-width: 640px) {
    .features-title {
        font-size: 32px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .features-background-circle {
        width: 500px;
        height: 500px;
    }
}

/* Curriculum Section Styles */
.curriculum-section {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 100px 0px 0px 0px;
    background: var(--Light-purple-1, #EAE7FF);
}

.curriculum-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.curriculum-header {
    text-align: left;
    margin-bottom: 60px;
}

.curriculum-badge {
    display: inline-block;
    background: #7C3AED;
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.curriculum-title {
    font-size: 36px;
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
    margin-bottom: 30px;
}

.curriculum-title .highlight {
    color: #7C3AED;
}

.curriculum-features {
    display: flex;
    justify-content: left;
    gap: 30px;
    flex-wrap: wrap;
}

.feature-item {
    font-size: 15px;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 8px;
}
.feature-item .start-icon {
    color: #B777F8;
}

.curriculum-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.curriculum-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.curriculum-tabs {
    display: flex;
    gap: 10px;
}

.tab-btn {
    padding: 10px 24px;
    border-radius: 24px;
    border: 1px solid #E5E7EB;
    background: #ffffff;
    color: #90F;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn.active {
    background: #90F;
    color: #ffffff;
    border-color: #90F;
}

.tab-btn:hover {
    border-color: #7C3AED;
}

.curriculum-card {
    background: linear-gradient(180deg, #D0BCFF 0%, #9C6AFF 100%);
    border-radius: 24px 24px 0px 0px;
    padding: 40px;
    position: relative;
    color: #ffffff;
    overflow: hidden;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-header {
    position: relative;
    z-index: 2;
}

.grade-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #6E33F6;
}

.curriculum-card .card-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 30px;
}

.card-footer {
    position: relative;
    z-index: 2;
}

.download-btn {
    width: 100%;
    padding: 0px 8px 0px 24px;
    background: #111827;
    color: #ffffff;
    border: none;
    height: 70px;
    border-radius: 35px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.download-btn img {
    position: absolute;
    right: 8px;
    width: 54px;
    height: 54px;
}

.download-btn:hover {
    background: #1F2937;
    transform: translateY(-2px);
}

.download-btn .arrow {
    font-size: 20px;
}

.robot-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 80px;
    height: 80px;
}

.robot-icon img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.curriculum-hashtags {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hashtag-title {
    padding-top: 45px;
    font-size: 50px;
    font-weight: 700;
    color: #000000;
    line-height: 1.3;
    margin-bottom: 20px;
    text-align: right;
}

.hashtag-desc {
    font-size: 16px;
    color: #000000;
    line-height: 1.8;
    text-align: right;
}

.curriculum-3d-image {
    position: absolute;
    top: -200px;
    right: 0px;
    width: 500px;
    height: 500px;
    z-index: 0;
}

.curriculum-3d-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: float 6s ease-in-out infinite;
}

/* Curriculum Responsive */
@media (max-width: 1024px) {
    .curriculum-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .curriculum-3d-image {
        display: none;
    }
}

@media (max-width: 640px) {
    .curriculum-title {
        font-size: 32px;
    }
    
    .hashtag-title {
        font-size: 28px;
    }
    
    .curriculum-features {
        flex-direction: column;
        align-items: center;
    }
}

/* Case Studies Section Styles */
.case-studies-section {
    padding: 100px 0;
    background: #ffffff;
}

.case-studies-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.case-studies-header {
    position: relative;
    margin-bottom: 60px;
}

.badge-purple {
    display: inline-block;
    background: #7C3AED;
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.case-studies-header .section-title {
    font-size: 36px;
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
    margin-bottom: 0;
}

.highlight-blue {
    color: #3B82F6;
}

.more-link {
    position: absolute;
    top: 0;
    right: 0;
    color: #6B7280;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.more-link:hover {
    color: #7C3AED;
}

/* Slider container */
.case-studies-slider {
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Custom scrollbar styling */
.case-studies-slider::-webkit-scrollbar {
    height: 8px;
}

.case-studies-slider::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.case-studies-slider::-webkit-scrollbar-thumb {
    background: #7C3AED;
    border-radius: 10px;
}

.case-studies-slider::-webkit-scrollbar-thumb:hover {
    background: #6D28D9;
}

/* Slider track */
.case-studies-track {
    display: flex;
    width: max-content;
    padding-bottom: 10px;
}

/* Card styles */
.case-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    flex: 0 0 420px;
    margin-right: 30px;
}

.case-card:last-child {
    margin-right: 0;
}

.case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.card-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.case-card:hover .card-image img {
    transform: scale(1.1);
}

.card-image .card-arrow {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    z-index: 2;
}

.card-content {
    background: #F9FAFB;
    padding: 24px;
}

.case-card .card-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.case-card .card-desc {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.5;
}


/* Case Studies Responsive */
@media (max-width: 1024px) {
    .case-studies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .more-link {
        position: static;
        display: inline-block;
        margin-top: 20px;
    }
}

@media (max-width: 640px) {
    .case-studies-grid {
        grid-template-columns: 1fr;
    }
    
    .case-studies-header .section-title {
        font-size: 28px;
    }
}

/* Education Section Responsive */
@media (max-width: 1200px) {
    .education-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .education-header {
        width: 100%;
        text-align: center;
        margin-bottom: 40px;
    }
    
    .education-cards {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .education-section {
        padding: 60px 0;
    }
    
    .education-title {
        font-size: 32px;
    }
    
    .education-cards {
        flex-direction: column;
        align-items: center;
    }
    
    .education-card {
        width: 100%;
        max-width: 400px;
    }
    
    .education-logo {
        display: none;
    }
}

/* Common Page Layout Styles */
.page-content {
    padding: 40px 0;
    background: #ffffff;
    width: 100%;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* My Project List Page Styles */

.project-header {
    margin-bottom: 40px;
}

.project-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.project-title h1 {
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
}
.project-title h1 img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.project-title .badge {
    background: #e0e7ff;
    color: #6366f1;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
}

.project-subtitle {
    font-size: 16px;
    color: #7F8CA9;
    margin-bottom: 16px;
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* Artibo Selector Component - Reusable */
.artibo-selector {
    position: relative;
}

.artibo-selector-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    background: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 15px;
    color: #1f2937;
    font-weight: 500;
    min-width: 250px;
    border: 1px solid var(--Light-gray-2, #E7EBF4);
}

.artibo-selector-btn:hover {
    background: #ebe5ff;
}

.artibo-selector-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.artibo-selector-icon svg {
    width: 20px;
    height: 20px;
}

.artibo-selector-text {
    font-weight: 500;
}

.artibo-selector-arrow {
    margin-left: auto;
    transition: transform 0.2s;
    color: #6b7280;
}

.artibo-selector-btn.active .artibo-selector-arrow {
    transform: rotate(180deg);
}

/* Artibo Dropdown Wrapper - for positioning */
.artibo-dropdown-wrapper {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    display: none;
}

.artibo-dropdown-wrapper.active {
    display: block;
}

/* Artibo Dropdown - reusable component */
.artibo-dropdown {
    width: 320px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.artibo-dropdown-wrapper .artibo-dropdown {
    display: block;
}

.artibo-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.artibo-dropdown-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 18px;
    padding: 4px;
    transition: color 0.2s;
}

.artibo-dropdown-close:hover {
    color: #6b7280;
}

.artibo-dropdown-list {
    padding: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.artibo-dropdown-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.artibo-dropdown-item:hover {
    background: #f9fafb;
}

.artibo-dropdown-item input[type="radio"] {
    margin-right: 12px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.artibo-dropdown-item span {
    font-size: 14px;
    color: #374151;
}

.artibo-dropdown-footer {
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
}

.artibo-confirm-btn {
    width: 100%;
    padding: 10px 20px;
    background: #7C3AED;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.artibo-confirm-btn:hover {
    background: #6D28D9;
}

.project-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}

.search-box {
    position: relative;
    flex: 0 1 400px;
    min-width: 200px;
}

.search-box input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: #fafafa;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.search-box input:focus {
    border-color: #6366f1;
}

.search-box input::placeholder {
    color: #9ca3af;
}

.search-box::before {
    content: "🔍";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
}

.date-picker-box {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.date-input {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.date-input input[type="text"] {
    padding: 10px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    font-size: 14px;
    color: #374151;
    min-width: 140px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.date-input input[type="text"]:focus {
    border-color: #6366f1;
}

.date-input input[type="text"]::placeholder {
    color: #9ca3af;
}

.date-separator {
    color: #9ca3af;
    font-size: 14px;
}

.sort-dropdown {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

select.default_dropdown {
    padding: 10px 36px 10px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    font-size: 14px;
    color: #374151;
    outline: none;
    transition: border-color 0.2s;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 120px;
}

select.default_dropdown:hover {
    border-color: #d1d5db;
}

select.default_dropdown:focus {
    border-color: #6366f1;
}

.sort-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
    outline: none;
    transition: border-color 0.2s;
}

.sort-button:hover {
    border-color: #d1d5db;
}

.sort-button svg {
    width: 12px;
    height: 12px;
    color: #6b7280;
}

.search-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #7c3aed;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
    flex-shrink: 0;
}

.search-button:hover {
    background: #6d28d9;
    color: white;
}

.search-button svg {
    width: 16px;
    height: 16px;
}

.create-project-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #7c3aed;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}

.create-project-btn:hover {
    background: #6d28d9;
    color: white;
}

.create-project-btn span {
    font-size: 16px;
}

/* Responsive styles */
@media (max-width: 1024px) {
    .project-controls {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .search-box {
        flex: 1 1 100%;
        max-width: 100%;
    }
    
    .date-picker-box {
        flex: 1 1 auto;
    }
    
    .sort-dropdown {
        flex: 1 1 auto;
    }
    
    .search-button {
        flex: 0 0 auto;
        margin-left: auto;
    }
}

@media (max-width: 768px) {
    .project-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-box {
        max-width: 100%;
    }
    
    .date-picker-box {
        width: 100%;
        justify-content: space-between;
    }
    
    .date-picker-box .date-input input {
        width: 100%;
    }
    
    .sort-dropdown {
        flex-direction: column;
        width: 100%;
    }
    
    .sort-dropdown select {
        width: 100%;
    }
    
    .search-button {
        width: 100%;
    }
}

/* Project List Grid Styles */
.project-list-section {
    margin-top: 40px;
}

.project-actions {
    margin-top: 30px;
    margin-bottom: 0;
    display: flex;
    justify-content: flex-start;
}

.project-count {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 60px;
}

.project-card {
    background: white;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border-radius: 16px;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.project-thumbnail {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.project-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.project-thumbnail .dropdown-content {
    display: none;
    position: absolute;
    right: 10px;
    left: auto !important;
    top: auto !important;
    bottom: 50px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    min-width: 150px;
}

.project-settings {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.project-settings svg {
    width: 20px;
    height: 20px;
    color: #6b7280;
}


.project-info {
    padding: 16px;
}

.project-name {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.project-author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 12px;
}

.author-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1f2937;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: #9ca3af;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-item svg {
    width: 14px;
    height: 14px;
}

/* Pagination Styles */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pagination-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}

.pagination-btn:hover:not(:disabled) {
    border-color: #6366f1;
    color: #6366f1;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-btn.active {
    background: #1f2937;
    color: white;
    border-color: #1f2937;
}

.pagination-dots {
    width: 36px;
    text-align: center;
    color: #9ca3af;
}

/* Responsive Grid */
@media (max-width: 1280px) {
    .project-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .project-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .project-grid {
        grid-template-columns: 1fr;
    }
}

/* Face Comparison Section Styles */
.face-comparison-section {
    margin-top: 60px;
    padding-bottom: 80px;
}

.face-cards-container {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    margin-bottom: 60px;
    flex-wrap: wrap;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 20px;
    min-height: 280px;
}

/* Dynamic face list styles */
.face-cards-container .face_list_box {
    display: contents;
}

.face-card {
    width: 200px;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: white;
    border: 2px solid #e5e7eb;
}

.face-card.upload-card {
    border: 2px dashed #7c3aed;
    background: white;
    cursor: pointer;
    transition: all 0.3s;
}

.face-card.upload-card:hover {
    background: #f9f5ff;
    border-color: #6d28d9;
}

.upload-area {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.upload-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-icon img {
    width: 60px;
    height: 60px;
}

.upload-icon svg {
    width: 24px;
    height: 24px;
}

.upload-text {
    font-size: 14px;
    color: #7c3aed;
    font-weight: 500;
}

.face-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.face-card .edit-button {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: #7c3aed;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.face-card:hover .edit-button {
    background: #6d28d9;
    transform: scale(1.1);
}

.face-card .edit-button svg {
    width: 16px;
    height: 16px;
}

.face-card .edit-button svg path {
    stroke: white;
}

.face-card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: white;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.compare-button-container {
    display: flex;
    justify-content: center;
}

.compare-button {
    padding: 16px 48px;
    background: #7c3aed;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.compare-button:hover {
    background: #6d28d9;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

/* Responsive styles for face comparison */
@media (max-width: 768px) {
    .header-row {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .device-selector {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .face-cards-container {
        justify-content: center;
        padding: 20px;
    }
    
    .face-card {
        width: 160px;
        height: 160px;
    }
}

/* Avatar Page Styles */
.avatar-section {
    margin-top: 40px;
    padding-bottom: 60px;
}

.avatar-main-container {
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 40px;
    align-items: start;
}

/* Left Column */
.avatar-left-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.avatar-device-selector {
    width: 100%;
}

.avatar-device-selector .artibo-selector-btn {
    width: 100%;
    justify-content: space-between;
}

.robot-display {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin-bottom: 20px;
}

.robot-screen {
    background: #000;
    border-radius: 16px;
    padding: 0;
    width: 100%;
    height: 300px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 20px;
}

.robot-label {
    position: absolute;
    top: 16px;
    left: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    z-index: 2;
}

.robot-image {
    width: auto;
    height: 260px;
    max-width: 80%;
    display: block;
    object-fit: contain;
    position: relative;
}

.main-robot-image {
    position: absolute;
    bottom: -70px;
    right: -80px;
    animation: float 2s ease-in-out infinite;
    z-index: 1;
}
.main-robot-image img {
    width: 260px;
}

.capture-button {
    width: 100%;
    margin-top: 0;
    padding: 16px 24px;
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.capture-button:hover {
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(168, 85, 247, 0.4);
}

/* Control Buttons */
.control-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.control-row {
    display: flex;
    gap: 10px;
}

.control-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #7c3aed;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.control-btn:hover {
    background: #6d28d9;
    transform: scale(1.1);
}

.stop-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stop-square {
    width: 18px;
    height: 18px;
    background-color: white;
    border-radius: 2px;
}

/* Right Column */
.avatar-right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 20px;
}

.avatar-tab-buttons {
    display: flex;
    gap: 0;
    background: #e5e7eb;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 24px;
}

.avatar-tab-btn {
    flex: 1;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    color: #6b7280;
}

.avatar-tab-btn.active {
    background: #7c3aed;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.avatar-tab-btn:hover:not(.active) {
    color: #4b5563;
}

.avatar-tab-content {
    margin-bottom: 30px;
}

.avatar-tab-panel {
    display: none;
}

.avatar-tab-panel.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Text Input Section */
.text-input-section {
    width: 100%;
    margin-bottom: 10px;
}

.avatar-text-input {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.avatar-text-input:focus {
    border-color: #7c3aed;
}

/* Voice Settings */
.voice-settings {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
}

.voice-tab {
    padding: 8px 16px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.voice-tab:hover {
    background: #f3f4f6;
}

.voice-tab.active {
    background: #7c3aed;
    color: white;
    border-color: #7c3aed;
}

.language-select {
    margin-left: auto;
    padding: 8px 32px 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: white;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    outline: none;
}

/* Convert Button */
.convert-button {
    padding: 12px 24px;
    background: #7c3aed;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.convert-button:hover {
    background: #6d28d9;
}

/* ===== MYPAGE STYLES ===== */
/* Profile Section */
.profile-section {
    margin-bottom: 40px;
}

.profile-container {
    background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
    border-radius: 20px;
    padding: 32px;
}

.profile-content {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
}

.profile-content .billing-btn {
    padding: 12px 24px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
}

.profile-content .billing-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.profile-avatar {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.avatar-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid white;
    object-fit: cover;
}

.edit-avatar-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    background: #7c3aed;
    border: 3px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.edit-avatar-btn:hover {
    background: #6d28d9;
    transform: scale(1.1);
}

.profile-info {
    flex: 1;
}

.profile-info .logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: white;
    border: 1px solid #7c3aed;
    border-radius: 18px;
    color: #7c3aed;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.profile-info .logout-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}


.edit_profile {
	background-color: #fff;
	margin: 0;
	display: none;
	min-width: 250px;
	overflow-y: auto;
	position: absolute;
	left: 120px;
	top: 70px;
	z-index: 99;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.edit_profile > li > h3 {
    margin-bottom: 20px;
}
.edit_profile > li {
	padding: 10px;
    text-align: center;
}
.edit_profile > li.divider {
	padding: 0px;
}

.profile-name {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.profile-email {
    font-size: 16px;
    color: #7c3aed;
    margin: 0 0 16px 0;
}

/* My Artibo Section */
.my-artibo-section {
    margin-bottom: 48px;
}

.my-artibo-section .section-title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 20px 0;
}

.artibo-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.artibo-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #ffffff;
    border-radius: 12px;
    transition: all 0.2s;
    cursor: pointer;
    border: 1px solid #E8E8E8;
}

.artibo-card:hover {
    background: #e5e7eb;
    transform: translateX(4px);
}

.artibo-empty {
    display: flex;
    align-items: center;
    padding: 20px;
    color: #9ca3af;
    font-size: 14px;
}

.artibo-icon {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.artibo-icon img {
    width: 56px;
    height: 56px;
}

.artibo-name {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
}

/* Recent Scratch Section */
.recent-scratch-section {
    margin-bottom: 48px;
}

.recent-scratch-section .section-title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 24px 0;
}

/* Load More */
.recent-scratch-section .load-more {
    text-align: center;
    margin-top: 32px;
    padding-top: 100px;
    padding-bottom: 20px;
}

.recent-scratch-section .load-more-btn {
    padding: 12px 32px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.recent-scratch-section .load-more-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.scratch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.scratch-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
}

.scratch-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.scratch-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f3f4f6;
    overflow: hidden;
}

.scratch-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scratch-settings {
    position: absolute;
    bottom: 8px;
    right: 8px;
}

.settings-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.settings-btn:hover {
    transform: scale(1.1);
}

.scratch-info {
    padding: 16px;
}

.scratch-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 12px 0;
}

.scratch-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scratch-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

.scratch-author img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

/* LCD Section */
.lcd-section {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 2px solid #e5e7eb;
}

.lcd-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 16px;
}

.lcd-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.lcd-item {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.lcd-item:hover {
    border-color: #7c3aed;
    background: #f9f5ff;
}

.lcd-item.active {
    border-color: #7c3aed;
    background: #f3f0ff;
}

.lcd-face {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    font-family: monospace;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .avatar-main-container {
        grid-template-columns: 1fr;
    }
    
    .avatar-left-column {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .lcd-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .voice-settings {
        flex-direction: column;
    }
    
    .language-select {
        margin-left: 0;
        width: 100%;
    }
}
/* ===== PYTHON CODE EDITOR STYLES ===== */
/* Specific styles for pythoncode page to prevent scrolling */
body:has(.pythoncode-wrapper) {
    overflow: hidden;
}

.site-main:has(.pythoncode-wrapper) {
    position: relative;
    height: calc(100vh - 600px); /* Adjust based on header height */
    overflow: hidden;
}

.pythoncode-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
}

.pythoncode-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f5f5f5;
}

.pythoncode-topbar {
    height: 70px;
    background:  var(--Gray, #BDC4D3);
    border-bottom: 1px solid #d1d1d1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
}

.run-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #7c3aed;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.run-button:hover {
    background: #6d28d9;
}

.pythoncode-main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.pythoncode-sidebar {
    width: 340px;
    background: white;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.device-selector {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.device-dropdown-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.device-dropdown-btn:hover {
    background: #f9fafb;
}

.device-icon {
    font-size: 18px;
}

.device-name {
    flex: 1;
    text-align: left;
    font-weight: 500;
}

.function-categories {
    display: flex;
    flex: 1;
    box-sizing: border-box;
    overflow: hidden;
}

/* Python Code Menu Columns */
.pcode_column {
    flex: 1;
}

.pcode_column_01 {
    flex: 0 0 60px !important;
    width: 60px !important;
    min-width: 60px;
    max-width: 60px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #E3E9F5;
    overflow-y: auto;
    overflow-x: hidden;
}

.pcode_column_02 {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
}

.pcode_l_ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pcode_l_li {
    margin-bottom: 8px;
}

.pcode_l_li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px;
    border: 1px solid transparent;
    border-radius: 6px;
    text-decoration: none;
    color: #374151;
    transition: all 0.2s;
    width: 100%;
    height: 65px;
}

.pcode_l_li a:hover {
    background: #f3f4f6;
    border-color: #e5e7eb;
}

.pcode_l_li a:focus,
.pcode_l_li a.active {
    background: #ede9fe;
    border-color: #c4b5fd;
}

.pcode_l_li_icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin-bottom: 3px;
}

.pcode_l_li_text {
    font-size: 9px;
    font-weight: 500;
    text-align: center;
    line-height: 1.1;
    color: #6b7280;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    width: 100%;
    max-width: 52px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pcode_l_li a:hover .pcode_l_li_text,
.pcode_l_li a.active .pcode_l_li_text {
    color: #7c3aed;
}

/* Function List Container */
.func_container {
    padding: 0px;
}

.func_ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.func_li {
    padding-left: 10px;
    margin-bottom: 16px;
}

.func_li h6 {
    font-size: 16px;
    font-weight: 900;
    color: #374151;
    margin: 0 0 8px 0;
    padding-top: 20px;
    padding-bottom: 4px;
    border-top: 1px solid #e5e7eb;
}

.func_div {
    padding: 8px 0px;
    margin-bottom: 6px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s;
}

.func_div:hover {
    background: #ede9fe;
    border-color: #c4b5fd;
}

.pcgBtn {
    padding: 6px 12px;
    background: #7c3aed;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.pcgBtn:hover {
    background: #6d28d9;
}

.pythoncode-editor {
    background: #000;
    display: flex;
    flex: 1;
    overflow: hidden;
}

#codemirror_box {
    width: 100%; height: 100%;
}


/* coding page [Begin] */
.cp_console_box{position: fixed; right: 0px; top: 191px; min-height:300px; width: 0px; height: 100%; background: rgba(55, 55, 55, 0.8);}
.cp_console_con{position: relative; padding: 20px; overflow-y: auto; height:100%; }
.cp_console_content{color:#ddd; width: 100%; text-align: left; font-size: 12px; user-select: none;}
.cp_console_content hr{display: block; height: 1px; border: 0; border-top: 1px solid #6f6f6f; margin: 5px 0; padding: 0;}
.cp_console_arr{position: absolute; top: 0px; left: -30px; width:30px; background: #555; border-radius: 5px 0px 0px 5px; cursor: pointer; text-align: center; color: #ffffff; font-size: 8px; line-height: 10px; padding: 10px 0px; user-select: none;}
.cp_console_arr:hover{opacity: 0.8}
.cp_console_img{max-width: 100%; border-radius: 5px;}

/* Nav Board Styles */
.nav-board {
    width: 100%;
    padding: 8px 16px;
    box-sizing: border-box;
}

.nav-board-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.nav-board-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-board-left {
    justify-content: flex-start;
    flex: 0 1 auto;
}

.nav-board-center {
    justify-content: center;
    flex: 1 1 auto;
}

.nav-board-right {
    justify-content: flex-end;
    flex: 0 1 auto;
}

.nav-board-btn {
    display: inline-flex;
    text-align: center;
    align-items: center;
    display: inline-block;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.nav-board-btn i.material-icons {
    font-size: 18px;
    margin-left: 4px;
}

.nav-board-btn-primary {
    background: #7C3AED;
    color: white;
    border: none;
}

.nav-board-btn-primary:hover {
    background: #6D28D9;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.nav-board-btn-secondary {
    background: white;
    color: #666;
    border: 1px solid #e0e0e0;
}

.nav-board-btn-secondary:hover {
    background: #f5f5f5;
    border-color: #bdbdbd;
}

.nav-board-btn-danger {
    background: #F44336;
    color: white;
    border: none;
}
.nav-board-btn-danger:hover {
    background: #D32F2F;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}

.nav-board-switch {
    display: flex;
    align-items: center;
}

.nav-board-switch label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
    margin: 0;
}

.nav-board-switch .lever {
    content: "";
    display: inline-block;
    position: relative;
    width: 36px;
    height: 14px;
    background-color: rgba(0, 0, 0, 0.38);
    border-radius: 15px;
    margin: 0 8px;
    transition: background 0.3s ease;
    vertical-align: middle;
}

.nav-board-switch .lever:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #f1f1f1;
    border-radius: 50%;
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
    left: -2px;
    top: -3px;
    transition: left 0.3s ease, background-color 0.3s ease;
}

.nav-board-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.nav-board-switch input[type="checkbox"]:checked + .lever {
    background-color: #84c7c1;
}

.nav-board-switch input[type="checkbox"]:checked + .lever:after {
    left: 18px;
    background-color: #26a69a;
}


.red-text {
  color: #F44336 !important;
}

.cp_table{padding: 0px; margin: 0px; border: 1px solid #6f6f6f}
.cp_table tr{border: 0px;}
.cp_table tr th{width: 30%; padding: 5px; text-align: right; font-size: 11px;}
.cp_table tr td{width: 70%; padding: 5px; text-align: left; font-size: 11px;}

.cp_table2{width: 100%; padding: 0px; margin: 0px; border: 1px solid #6f6f6f}
.cp_table2 tr{border: 0px;}
.cp_table2 tr th{padding: 2px 5px; text-align: left; font-size: 11px; border:1px solid #6f6f6f;}
.cp_table2 tr td{padding: 2px 5px; text-align: left; font-size: 11px; border:1px solid #6f6f6f;}

.cp_progress_1{position: relative; background: #7f7f7f; height: 14px; width: 100%; font-size: 12px;}
.cp_progress_in_1{position: absolute; top: 0px; left: 0px; height: 14px; line-height: 14px; background: #444444; font-size: 10px; width: 0%;}

.facearea{display: inline-block; position: relative;}
.face-box{transition: all .25s ease; cursor: pointer; opacity: 1 !important;}
.graybox{box-shadow:0 0 2px #9e9e9e, 0 0 2px #9e9e9e, 0 0 2px #9e9e9e, 0 0 2px #9e9e9e, inset 0 0 2px #9e9e9e, inset 0 0 2px #9e9e9e, inset 0 0 2px #9e9e9e, inset 0 0 2px #9e9e9e}
/* coding page [End] */


.tabs {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  height: 58px;
  line-height:58px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  background-color: #fff;
  margin: 0 auto;
  white-space: nowrap;
  font-weight:500;
}

.tabs.tabs-transparent {
  background-color: transparent;
}

.tabs.tabs-transparent .tab a,
.tabs.tabs-transparent .tab.disabled a,
.tabs.tabs-transparent .tab.disabled a:hover {
  /*color: rgba(255, 255, 255, 0.7);*/
  color:#ffffff;
}

.tabs.tabs-transparent .tab a:hover,
.tabs.tabs-transparent .tab a.active {
  color: #fff;
}

.tabs.tabs-transparent .indicator {
  background-color: #fff;
}

.tabs.tabs-fixed-width {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.tabs.tabs-fixed-width .tab {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.tabs .tab {
  display: inline-block;
  text-align: center;
  line-height: 58px;
  height: 58px;  
  padding: 0;
  margin: 0;
  text-transform: uppercase;
}

.tabs .tab a {
  /*color: rgba(110, 194, 238, 0.7);*/
  color: #fff;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 24px;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-transition: color .28s ease, background-color .28s ease;
  transition: color .28s ease, background-color .28s ease;
}

.tabs a i.material-icons{
	display:inline;
}

.tabs .tab a:focus, .tabs .tab a:focus.active {
  background-color: rgba(178, 220, 246, 0.2);
  outline: none;
}

.tabs .tab a:hover, .tabs .tab a.active {
  background-color: transparent;
  /*color: #74ccff;*/
  color:#ffffff;
  border-bottom:3px solid #90CAF9;
}

.tabs .sub-tab a:focus, .tabs .tab a:focus.active {
  background-color: transparent;
  outline: none;
}

.tabs .sub-tab a:hover, .tabs .tab a.active {
  background-color: transparent;
  color:#ffffff;
}

.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
  /*color: rgba(110, 194, 238, 0.4);*/
  color:#ffffff;
  cursor: default;
}

.tabs .indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: #c0e2ff;
  will-change: left, right;
}



/* popup artibo image [Begin] */
.popup_artibo_image{z-index: 40; position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.5);}
.pai_bg{position: relative; width:100%; height:100%;}
.pai_container{position: absolute; width: 500px; min-height:300px; top:50%; left:50%; margin-top: -150px; margin-left: -250px; background:#fff; border-radius:10px; overflow:hidden; text-align: center;}
.pai_scene{position:relative; width:480px; min-height:280px; margin:10px; background:#fff; overflow:hidden;}

.pai_scene1_1{height:180px; text-align:center;}
.pai_scene1_2{text-align:center; font-size:50px; font-weight:bold;}
.pai_scene1_3{color:#7C3AED}

.pai_scene2_1{text-align:center; height:60px; overflow:hidden;}
.pai_scene2_2{padding-top:20px; font-size:16px;}
.pai_scene2_3{color:#7C3AED;}
.pai_scene2_4{text-align:center; height: 60px; overflow:hidden; font-size:12px; color:#aaa;}
.pai_scene2_5{text-align:center;}
.pai_scene2_6{text-align:center; line-height:280px;}
.pai_scene2_6_text{font-size:80px; 
  display: inline-block;
  animation: pai_text_bounce 1s infinite;
  -webkit-animation: pai_text_bounce 1s infinite;
}
.pai_scene2_tmp{margin:auto; width: 200px; height: 130px; background:#eee; border-radius: 5px;}
.pai_scene2_img{margin:auto; width: 200px; height: 150px; border-radius: 5px;}


img.responsive-img,
video.responsive-video {
  max-width: 100%;
  height: auto;
}

@keyframes pai_text_bounce{
  0%{transform: scale(1);}
  30%{transform: scale(1);}
  60%{transform: scale(1.1);}
  100%{transform: scale(1);}
}
@-webkit-keyframes pai_text_bounce{
  0%{transform: scale(1);}
  30%{transform: scale(1);}
  60%{transform: scale(1.1);}
  100%{transform: scale(1);}
}
/* popup artibo image [End] */


/* popup artibo image [Begin] */
.popup_artibo_image, .popup_artibo_speech, .popup_artibo_face, .popup_artibo_dall_e, .popup_login, .popup_signup {
	z-index: 999;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}
.pai_bg {
	position: relative;
	width: 100%;
	height: 100%;
}
.pai_container {
	position: absolute;
	width: 500px;
	min-height: 500px;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -275px;
	overflow: hidden;
    border-radius: 10px;
}
.pai_container_large {
	position: absolute;
	width: 800px;
	min-height: 500px;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -400px;
	overflow: hidden;
    border-radius: 10px;
}
.pai_scene {
	position: relative;
	width: 500px;
	min-height: 500px;
	margin: 0px;
	overflow: hidden;
    text-align: center;
}
.pai_scene > div {
	height: 100%;
}

@keyframes pai_text_bounce {
 0% {
transform: scale(1);
}
 30% {
transform: scale(1);
}
 60% {
transform: scale(1.1);
}
 100% {
transform: scale(1);
}
}
@-webkit-keyframes pai_text_bounce {
 0% {
transform: scale(1);
}
 30% {
transform: scale(1);
}
 60% {
transform: scale(1.1);
}
 100% {
transform: scale(1);
}
}
/* popup artibo image [End] */

.card-panel {
  -webkit-transition: -webkit-box-shadow .25s;
  transition: -webkit-box-shadow .25s;
  transition: box-shadow .25s;
  transition: box-shadow .25s, -webkit-box-shadow .25s;
  padding: 24px;
  margin: 0.5rem 0 1rem 0;
  border-radius: 2px;
  background-color: #fff;
}


/* Project [Begin] */
.new_project_panel {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 997;
	display: none;
	overflow: auto;
    text-align: center;
}
.new_project_title {
    padding: 40px 20px 30px;
    font-size: 1.8rem;
    font-weight: 600;
}
.np_container {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 30px;
}

.new_project_panel .row {
	margin-bottom: 25px;
}

.new_project_panel .project-photo {
	margin-bottom: 30px;
}

.new_project_panel .input-field {
	margin-bottom: 30px;
}
.new_project_panel .input-field input[type=text] {
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    transition: all 0.2s;
}
.np_list_container {
	text-align: center;
}
.np_list {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 1000px;
	margin: 0px auto;
	padding: 50px 0px 30px 0px;
}
.np_list_item {
	float: left;
	width: 25%;
	list-style: none;
	text-align: center;
	padding: 0px 0px 20px 0px;
	margin: 0px;
}
.np_list_block {
	transition: all 0.1s linear;
	transform: scale3d(1, 1, 1);
	margin: auto;
	width: 100%;
	max-width: 200px;
	cursor: pointer;
}
.np_list_block:hover {
	transform: scale3d(1.05, 1.05, 1);
}
.np_list_img {
	width: 100%;
}
.np_list_img2 {
	padding-bottom: 70%;
}
.np_list_img3 {
}
.np_list_thumbnail {
	width: 100%;
}
.np_list_tit {
	padding: 10px 0px;
	text-align: center;
}
.np_list_tit2 {
	font-size: 16px;
	color: #000;
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
	width: 100%;
	overflow: hidden;
	font-weight: 400;
}
.p_thumbnail_box {
	position: relative;
}
.p_thumbnail_preview {
	position: absolute;
	top: 0px;
	left: 25%;
	width: 50%;
	height: 100%;
	background-size: cover;
	background-position: center center;
}
.p_thumbnail_file {
	overflow: hidden;
	width: 0px;
	height: 0px;
	display: none;
	opacity: 0;
}
.cs_bot_box {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	z-index: 41;
	padding: 5px 50px;
	background-color: rgba(255, 255, 255,0.5);
	border-top: 1px solid #eeeeee;
}
.cs_bot_1 {
	overflow: hidden;
}
.cs_bot_1_1 {
	float: left;
	overflow: hidden;
	margin-right: 50px;
}
.cs_bot_1_2 {
	flouat: left;
	display: inline-block;
	line-height: 40px;
	padding: 0px;
	margin: 0px;
	font-size: 20px;
	font-size: bold;
}
.cs_bot_1_1_1 {
	float: left;
}
.cs_bot_1_1_1 > img {
	width: 40px;
	height: 40px;
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
}
.cs_bot_1_1_2 {
	float: left;
	line-height: 40px;
	padding-left: 10px;
	font-size: 14px;
	font-weight: bold;
	color: #888;
}
.cs_bot_1_3 {
	float: right;
}
.cs_bot_1_3 > a {
	font-size: 20px;
}
.cs_bot_1_3 > a > i {
	vertical-align: middle;
}
.project-photo {
	margin-bottom: 10px;
}
.project-photo img {
	width: 50%;
}
/* Project [End] */

/* snackbar [Begin] */
.snackbar {
	display: none; /* Hidden by default. Visible on click */
	min-width: 350px; /* Set a default minimum width */
	margin-left: -175px; /* Divide value of min-width by 2 */
	background-color: #1e88e5; /* Black background color */
	color: #fff; /* White text color */
	text-align: center; /* Centered text */
	border-radius: 3px; /* Rounded borders */
	padding: 16px; /* Padding */
	position: fixed; /* Sit on top of the screen */
	z-index: 9999; /* Add a z-index if needed */
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.snackbar.show {
	display: block; /* Show the snackbar */
}
.snackbar_bot {
	left: 50%;
	bottom: -50px;
}
.snackbar_bot.show {
	bottom: 30px;
	-webkit-animation: snackbar_bot_fadein 0.5s, snackbar_bot_fadeout 0.5s 2.5s;
	animation: snackbar_bot_fadein 0.5s, snackbar_bot_fadeout 0.5s 2.5s;
}
.snackbar_top {
	left: 50%;
	top: -50px;
}
.snackbar_top.show {
	top: 30px;
	-webkit-animation: snackbar_top_fadein 0.5s, snackbar_top_fadeout 0.5s 2.5s;
	animation: snackbar_top_fadein 0.5s, snackbar_top_fadeout 0.5s 2.5s;
}
.snackbar_color_default {
	background-color: #7C3AED !important;
	color: #fff !important;
}
.snackbar_color_danger {
	background-color: #c62828 !important;
	color: #fff !important;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes snackbar_bot_fadein {
 from {bottom: 0;opacity: 0;}
to {bottom: 30px;opacity: 1;}
}
 @keyframes snackbar_bot_fadein {
 from {bottom: 0;opacity: 0;}
to {bottom: 30px;opacity: 1;}
}
 @-webkit-keyframes snackbar_bot_fadeout {
 from {bottom: 30px;opacity: 1;}
to {bottom: 0;	opacity: 0;}
}
 @keyframes snackbar_bot_fadeout {
 from {bottom: 30px;opacity: 1;}
to {bottom: 0;	opacity: 0;}
}
 @-webkit-keyframes snackbar_top_fadein {
 from {top: 0;opacity: 0;}
to {top: 30px;	opacity: 1;}
}
 @keyframes snackbar_top_fadein {
 from {top: 0;opacity: 0;}
to {top: 30px;	opacity: 1;}
}
 @-webkit-keyframes snackbar_top_fadeout {
 from {top: 30px;opacity: 1;}
to {top: 0;	opacity: 0;}
}
 @keyframes snackbar_top_fadeout {
 from {top: 30px;opacity: 1;}
to {top: 0;	opacity: 0;}
}
/* snackbar [End] */



/* cu_confirm [Begin] */
.cr_confirm_bg {
	position: fixed;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
}
.cr_confirm_title {
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 10px;
}
.cr_confirm_con {
	word-break: break-all;
}
.cr_confirm_close_btn {
	position: absolute;
	top: -10px;
	right: -10px;
	display: inline-block;
	border: 1px solid #ddd;
	border-radius: 50%;
	padding: 20px;
	background: #fff;
	overflow: hidden;
	cursor: pointer;
	transform: scale3d(1, 1, 1);
}
.cr_confirm_close_btn:hover {
	transform: scale3d(1.1, 1.1, 1);
}
.cr_confirm_box {
	position: relative;
	padding: 30px;
	border-radius: 10px;
	background: #fff;
	max-width: 500px;
	width: 100%;
	max-height: 90%;
	overflow: auto;
	margin: auto 10px;
	box-shadow: 0px 5px 0px #333333;
}
.cr_confirm_btn_group {
	padding-top: 30px;
	text-align: right;
}
.cr_confirm_btn_group button {
	margin-left: 15px;
}
/* cu_confirm [End] */

/* Change Password Page [Begin] */
.page-content .section {
	max-width: 500px;
	margin: 40px auto;
	background: #fff;
	border-radius: 12px;
	padding: 40px 30px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.page-content .section form > div {
	margin-bottom: 25px;
}

.page-content .section input,
.page-content .section input[type="password"],
.page-content .section input[type="text"],
.page-content .section input[type="email"] {
	width: 100%;
	padding: 12px 15px;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	font-size: 14px;
	transition: all 0.3s ease;
	background: #fafafa;
}

.page-content .section input[type="password"]:focus,
.page-content .section input[type="text"]:focus,
.page-content .section input[type="email"]:focus {
	border-color: #667eea;
	background: #fff;
	outline: none;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.page-content .section label {
	display: block;
	margin-bottom: 8px;
	color: #555;
	font-size: 14px;
	font-weight: 500;
}

.page-content .section .row.center {
	margin-top: 35px;
	padding-top: 25px;
	border-top: 1px solid #eee;
}

.page-content .section div[align="center"] {
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;
	color: #333;
	font-weight: 500;
	margin-bottom: 30px;
}
/* Change Password Page [End] */

/* Login and Signup Popups [Begin] */
.popup_login .popup_bg,
.popup_signup .popup_bg {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup_login .popup_container,
.popup_signup .popup_container {
	position: relative;
	width: 425px;
	background: #fff;
	border-radius: 20px;
	padding: 0;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.popup_close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 1000;
}

.popup_close .close_btn {
	background: none;
	border: none;
	font-size: 28px;
	color: #666;
	cursor: pointer;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.popup_close .close_btn:hover {
	background: #f0f0f0;
	color: #333;
}

.popup_content {
	padding: 50px 40px 40px;
}

.popup_header {
	text-align: center;
	margin-bottom: 35px;
}

.popup_title {
	font-size: 32px;
	font-weight: 900;
	letter-spacing: 2px;
	margin: 0;
	color: #1a1a1a;
}

.popup_subtitle {
	font-size: 16px;
	color: #666;
	margin-top: 8px;
}

.input_group {
	margin-bottom: 20px;
}

.input_group input {
	width: 100%;
	padding: 15px 18px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-size: 15px;
	transition: all 0.3s ease;
	background: #fafafa;
}

.input_group input:focus {
	outline: none;
	border-color: #7c3aed;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.input_group input::placeholder {
	color: #999;
}

.submit_btn {
	width: 100%;
	padding: 16px;
	background: #7c3aed;
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-top: 10px;
}

.submit_btn:hover {
	background: #6d28d9;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.form_options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	margin-bottom: 25px;
}

.remember_me {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
	color: #666;
}

.remember_me input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-right: 8px;
	cursor: pointer;
}

.forgot_link {
	font-size: 14px;
	color: #666;
	text-decoration: none;
	transition: color 0.3s ease;
}

.forgot_link:hover {
	color: #7c3aed;
	text-decoration: underline;
}

.signup_prompt {
	text-align: center;
	margin-top: 25px;
	padding-top: 25px;
	border-top: 1px solid #e0e0e0;
	font-size: 14px;
	color: #666;
}

.signup_btn {
	width: 100%;
	padding: 14px;
	background: #fff;
	color: #7c3aed;
	border: 2px solid #7c3aed;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-top: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.signup_btn:hover {
	background: #7c3aed;
	color: white;
}

.signup_btn .artibo_icon {
	width: 24px;
	height: 24px;
	margin-right: 10px;
}

.signup_btn .plus_icon {
	position: absolute;
	right: 20px;
	font-size: 20px;
	font-weight: 300;
}

/* Signup specific styles */
.terms_group {
	margin: 25px 0;
	padding: 20px;
	background: #f8f8f8;
	border-radius: 8px;
}

.terms_check {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	cursor: pointer;
	font-weight: 600;
	color: #333;
}

.terms_check input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-right: 10px;
	cursor: pointer;
}

.terms_list {
	padding-left: 30px;
}

.terms_item {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	font-size: 14px;
	color: #666;
	cursor: pointer;
	position: relative;
}

.terms_item input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-right: 8px;
	cursor: pointer;
}

.terms_link {
	position: absolute;
	right: 0;
	font-size: 13px;
	color: #7c3aed;
	text-decoration: none;
}

.terms_link:hover {
	text-decoration: underline;
}

.login_prompt {
	text-align: center;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #e0e0e0;
	font-size: 14px;
	color: #666;
}

.login_link {
	color: #7c3aed;
	text-decoration: none;
	font-weight: 600;
	margin-left: 5px;
}

.login_link:hover {
	text-decoration: underline;
}
/* Login and Signup Popups [End] */

/* File Upload Section [Begin] */
.file-upload-section {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 20px 0;
}

.file-upload-btn {
	background-color: #7C3AED;
	color: white;
	padding: 8px 24px;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: background-color 0.3s ease;
	display: inline-block;
	min-width: 64px;
	text-align: center;
}

.file-upload-btn:hover {
	background-color: #6D28D9;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.file-name-display {
	flex: 1;
	border-bottom: 1px solid #9e9e9e;
	padding: 8px 0 7px 0;
	margin-left: 0;
	min-height: 35px;
	display: flex;
	align-items: center;
}

.file-name-display span {
	color: #666;
	font-size: 14px;
	padding-left: 10px;
}

.file-name-display span:empty::before {
	content: "";
}
/* File Upload Section [End] */