@font-face { font-family: 'ITC Avant Garde Gothic Std Extra Light'; src: url('fonts/ITC Avant Garde Gothic Std Extra Light.woff2') format('woff2'); }
@font-face { font-family: 'AR ADGothicJP'; src: url('fonts/jadhei01m.woff2') format('woff2'); }
@font-face { font-family: 'KozGoPr6N'; src: url('fonts/KozGoPr6N-Medium.woff2') format('woff2'); }

:root {
    --bg-grad-1: #e0eafc; --bg-grad-2: #cfdef3; --bg-grad-3: #FFB6C1; --bg-grad-4: #f8bbd0;
    --surface-light: rgba(255, 255, 255, 0.95); --surface-dark: rgba(30, 30, 30, 0.95);
    --primary: #FF4081; --primary-hover: #E91E63;
    --glass-border: rgba(255, 255, 255, 0.5);
    --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.08); --shadow-hover: 0 12px 40px rgba(255, 64, 129, 0.25);
    --text-main: #2C3E50; --text-sec: #7F8C8D;
    --radius-lg: 24px; --radius-md: 16px; --radius-sm: 8px;
}

body.dark-mode {
    --bg-grad-1: #1a1a2e; --bg-grad-2: #16213e; --bg-grad-3: #4A148C; --bg-grad-4: #880E4F;
    --surface-light: var(--surface-dark); --glass-border: rgba(255, 255, 255, 0.05);
    --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.4); --text-main: #F0F0F0; --text-sec: #A0A0A0;
}

body {
    font-family: 'KozGoPr6N', 'AR ADGothicJP', 'Noto Sans JP', 'Noto Sans TC', sans-serif;
    margin: 0; padding: 0; color: var(--text-main);
    background: linear-gradient(-45deg, var(--bg-grad-1), var(--bg-grad-2), var(--bg-grad-3), var(--bg-grad-4));
    background-size: 400% 400%; animation: gradientBG 20s ease infinite;
    transition: color 0.4s ease; -webkit-tap-highlight-color: transparent;
    min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden;
}

@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.topbar {
    display: flex; justify-content: space-between; align-items: center; padding: 10px 16px;
    background: var(--surface-light); border-bottom: 1px solid var(--glass-border);
    position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.brand { font-size: clamp(0.75rem, 3.5vw, 1.25rem); font-weight: 900; color: var(--primary); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand .icon-sm { width: 16px; height: 16px; flex-shrink: 0; }
.topbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0;}

.lang-select, .preset-select {
    -webkit-appearance: none; appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
    background-repeat: no-repeat; background-position: right 8px center;
}
body.dark-mode .lang-select, body.dark-mode .preset-select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
}

.lang-select { 
    padding: 6px 24px 6px 10px; border-radius: 20px; border: 1px solid var(--glass-border); 
    background-color: var(--surface-light); color: var(--text-main); font-size: clamp(0.75rem, 2vw, 0.85rem); 
    cursor: pointer; font-weight: bold; outline: none; font-family: inherit; line-height: 1.5;
    max-width: 100px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.preset-select { width: 100%; padding: 10px 30px 10px 12px; border-radius: 8px; border: 1px solid var(--glass-border); background-color: var(--surface-light); color: var(--text-main); font-weight: 600; cursor: pointer; font-family: inherit; line-height: 1.5; }
body.dark-mode .preset-select { background-color: #222; border-color: #444; }

.icon-btn { background: var(--surface-light); color: var(--text-main); border: 1px solid var(--glass-border); width: 32px; height: 32px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 2px 10px rgba(0,0,0,0.05); flex-shrink: 0;}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { transform: scale(1.1); }

/* GPU 加速與佈局防白屏 */
.main-container { display: flex; flex-direction: column; padding: 16px; gap: 16px; max-width: 1400px; margin: 0 auto; flex: 1; width: 100%; box-sizing: border-box; transform: translateZ(0); will-change: transform;}
.preview-panel { order: 1; } .controls-panel { order: 2; }
@media (min-width: 900px) {
    .main-container { flex-direction: row; align-items: flex-start; padding: 24px; gap: 24px;}
    .preview-panel { flex-grow: 1; order: 1; width: calc(100% - 350px); }
    .controls-panel { width: 330px; flex-shrink: 0; position: sticky; top: 80px; order: 2; }
}

.panel { background: var(--surface-light); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-soft); }

.flex-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
button.btn { background: rgba(0,0,0,0.03); color: var(--text-main); border: 1px solid var(--glass-border); padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; font-weight: 700; font-size: 0.85rem; font-family: inherit; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; overflow: hidden; transition: all 0.2s; white-space: nowrap; }
body.dark-mode button.btn { background: rgba(255,255,255,0.05); }
button.btn:active { transform: translateY(0) scale(0.97); }
button.btn-primary { background: var(--primary); color: white; border: none; }
button.btn-primary:hover { background: var(--primary-hover); box-shadow: var(--shadow-hover); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none;}

/* 全域淺透粉紅漣漪回饋 */
.global-ripple {
    position: fixed; border-radius: 50%; width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(255,105,180,0.5) 0%, rgba(255,105,180,0.1) 70%, transparent 100%);
    transform: translate(-50%, -50%) scale(0);
    animation: global-ripple-anim 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    pointer-events: none; z-index: 9999;
}
@keyframes global-ripple-anim {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

.control-group { margin-bottom: 24px; }
.control-group label.title { display: block; font-weight: 700; margin-bottom: 12px; font-size: 0.95rem; color: var(--text-sec); }
.toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; margin-bottom: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(0,0,0,0.02); font-weight: 600; transition: 0.2s; }
body.dark-mode .toggle-label { background: rgba(255,255,255,0.02); }
.toggle-label:hover { background: rgba(0,0,0,0.05); }
.toggle-label input { transform: scale(1.2); accent-color: var(--primary); margin: 0; }

/* 完美呼吸燈設計：只框輸入區域，並且有閃爍筆 */
.header-edit-area { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.title-input-wrapper { 
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; 
    border-radius: var(--radius-md); background: rgba(0,0,0,0.02);
    border: 2px dashed rgba(255,64,129,0.3); animation: borderPulse 3s infinite alternate; 
}
body.dark-mode .title-input-wrapper { background: rgba(255,255,255,0.02); }
@keyframes borderPulse { 0% { border-color: rgba(255,64,129,0.2); box-shadow: 0 0 5px rgba(255,64,129,0.1); } 100% { border-color: rgba(255,64,129,0.8); box-shadow: 0 0 15px rgba(255,64,129,0.4); } }

/* 閃爍筆掣 */
.blinking-pen { color: var(--primary); width: 22px; height: 22px; flex-shrink: 0; animation: penBlink 1.5s infinite step-start; }
@keyframes penBlink { 50% { opacity: 0; } }

.custom-title-input { width: 100%; border: none; background: transparent; font-size: clamp(1.1rem, 4vw, 1.4rem); font-weight: 900; color: var(--text-main); outline: none; border-bottom: 2px solid transparent; padding-bottom: 4px; transition: border-color 0.3s; font-family: inherit; }
.custom-title-input:focus { border-bottom-color: var(--primary); }

.select-group { display: flex; gap: 10px; flex-wrap: wrap; flex-direction: column; margin-top: 8px;}

/* 完美強制 4x2 佈局 (-0.5px 防捨入誤差) */
#htmlGrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; width: 100%; transition: all 0.3s ease; }
.grid-cell {
    flex: 0 0 calc((100% - (var(--cols) - 1) * 16px) / var(--cols) - 0.5px); 
    max-width: 240px; aspect-ratio: 3 / 4; background: var(--surface-light); border-radius: var(--radius-md); position: relative; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s; border: 2px dashed #DDD; overflow: hidden; container-type: inline-size; flex-shrink: 0; box-sizing: border-box; transform: translateZ(0);
}
body.dark-mode .grid-cell { border-color: #444; }
.grid-cell:hover { transform: translateY(-5px) scale(1.02); border-color: var(--primary); z-index: 2; box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.grid-cell.filled { border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

.add-icon { color: var(--text-sec); opacity: 0.3; }
.add-icon svg { width: 40px; height: 40px; }

.cell-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transition: background 0.3s; }
.cell-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); z-index: 2; }
.cell-content { position: relative; z-index: 3; width: 100%; height: 100%; padding: 4cqw; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; transition: all 0.3s ease;}

.avatar-wrap { width: 45cqw; height: 45cqw; border-radius: 50%; box-shadow: 0 6px 15px rgba(0,0,0,0.2); background: #EEE; animation: float 6s ease-in-out infinite; border: 3px solid white; flex-shrink: 0; margin-bottom: 2cqw; transition: all 0.3s ease; margin-top: 4cqw;}
body.dark-mode .avatar-wrap { border-color: #333; }
.mode-block .avatar-wrap { border-color: rgba(255,255,255,0.8); }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-4px); } }
.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.text-wrap { text-align: center; width: 100%; display: flex; flex-direction: column; gap: 1cqw; margin: 0; flex-grow: 1; justify-content: center; transition: all 0.3s ease; }
ruby { ruby-align: center; }
rt { font-size: 4cqw; color: var(--text-sec); font-weight: 700; opacity: 0.9; margin-bottom: -0.5cqw;}
.cell-gen { font-size: 6cqw; color: var(--text-sec); font-weight: 700; transition: all 0.3s ease; margin-bottom: 1cqw;}
.cell-name { font-size: 11cqw; font-weight: 900; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.cell-nick { font-size: 7cqw; font-weight: 700; color: var(--text-sec); transition: all 0.3s ease;}
.mode-block rt, .mode-block .cell-gen, .mode-block .cell-name, .mode-block .cell-nick { color: #FFFFFF !important; text-shadow: 0 2px 4px rgba(0,0,0,0.6); }

.color-display { display: flex; justify-content: center; align-items: center; gap: 1.5cqw; width: 100%; padding-bottom: 2cqw; transition: all 0.3s ease; flex-wrap: wrap; line-height: 1.2; margin-top: auto;}
.c-text { font-size: min(8cqw, 14px); font-weight: 900; white-space: nowrap;}
.c-text-x { font-size: 6cqw; color: var(--text-sec); font-weight: bold; margin: 0 1cqw; }
.mode-block .c-text-x { display: none; }

/* 完美置中放大防出界 */
.grid-cell.no-photo .cell-content, .grid-cell.no-name .cell-content { justify-content: center; padding: 6cqw; }
.grid-cell.no-photo .text-wrap { transform: scale(1.35); gap: 2cqw; margin-bottom: 3cqw; margin-top: auto; }
.grid-cell.no-photo .color-display { transform: scale(1.35); margin-top: 0; margin-bottom: auto; }
.grid-cell.no-name .text-wrap { display: none; }
.grid-cell.no-name .avatar-wrap { transform: scale(1.2); margin-top: auto; margin-bottom: 3cqw; }
.grid-cell.no-name .color-display { transform: scale(1.2); margin-top: 0; margin-bottom: auto; }

.remove-btn { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.4); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 10; opacity: 0; transition: all 0.2s; backdrop-filter: blur(4px); }
.remove-btn svg { width: 16px; height: 16px; }
.grid-cell:hover .remove-btn { opacity: 1; transform: scale(1); }
.remove-btn:hover { background: #FF3633; }

.app-footer { text-align: center; padding: 20px; color: var(--text-sec); font-size: 0.85rem; margin-top: auto; line-height: 1.6; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); z-index: 1000; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s; }
.modal-overlay.active { display: flex; opacity: 1; }
.modal-content { background: var(--surface-light); width: 90%; max-width: 600px; max-height: 80vh; border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.modal-overlay.active .modal-content { transform: translateY(0); }
.modal-header { padding: 16px 24px; background: rgba(0,0,0,0.03); border-bottom: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-size: 1.1rem; }
.modal-body { padding: 24px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 16px; }
.member-option { text-align: center; cursor: pointer; transition: transform 0.2s; }
.member-option:hover { transform: scale(1.1); }
.member-option img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; border: 2px solid transparent; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.member-option:hover img { border-color: var(--primary); }
.member-option span { display: block; font-size: 0.75rem; font-weight: 700; color: var(--text-main); }

#exportCanvas { display: none; }
#loadingOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); color: white; z-index: 2000; display: none; justify-content: center; align-items: center; font-size: 1.2rem; font-weight: bold; flex-direction: column; gap: 16px; backdrop-filter: blur(5px); }
.spinner { width: 50px; height: 50px; border: 4px solid rgba(255,255,255,0.2); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite; }

/* 提示點擊的呼吸框框 */
.breathing-select {
    border: 2px dashed rgba(255,64,129,0.3) !important;
    animation: borderPulse 3s infinite alternate;
    transition: border 0.3s, box-shadow 0.3s;
}