@charset "UTF-8";
/* Tailwind handles most styling in index.html */
body { font-family: 'Inter', sans-serif; }

.workspace { transition: border-color 0.3s, background-color 0.3s; }
.workspace.drag-over { border-color: #6366f1 !important; background-color: #e0e7ff !important; }

/* Custom color picker handled by app.js */
.color-list { display: flex; gap: 10px; flex-wrap: wrap; }
.color-item {
    width: 36px; height: 36px; border-radius: 9999px; cursor: pointer; border: 2px solid transparent; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: all 0.2s; flex-shrink: 0;
}
.color-item.active {
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
    transform: scale(1.1);
}

/* Modal handled by app.js class toggling */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center; z-index: 1000;
}
.modal-overlay.show { display: flex !important; }

/* Cropper container logic */
#cropperImage { max-width: 100%; max-height: 100%; display: block; }

/* Custom select style for nicer flags */
.nice-select { 
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); 
    background-position: right 0.75rem center; 
    background-repeat: no-repeat; 
    background-size: 1.5em 1.5em; 
    padding-right: 2.5rem; 
    -webkit-appearance: none; 
    appearance: none; 
}


/* 裁剪框内的头顶辅助椭圆 */
.cropper-face::after {
    content: "";
    display: block;
    position: absolute;
    /* 通过 CSS 变量接收来自 JS 的动态值 */
    top: var(--guide-top, 10%);
    left: 50%;
    transform: translateX(-50%);
    width: var(--guide-width, 70%);
    height: var(--guide-height, 75%);
    /* 使用双色叠加或高对比度黄色，确保在深浅背景下都可见 */
    border: 2.5px solid #ffeb3b; /* 增加粗细并改为实线 */
    border-style: dashed; /* 保持虚线风格，但增加实感 */
    border-radius: 50% 50% 45% 45%;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 10;
    /* 核心改进：双重阴影。内部黑色阴影 + 外部发光，极大提升边缘分辨率 */       
    filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 2px #000);
}

.cropper-face::before {
    content: "Face Guide";
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    pointer-events: none;
}