@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: #F676A6; --primary-hover: #E55A8C;
    --tool48-account-bg: rgba(255, 255, 255, 0.58);
    --tool48-account-border: rgba(255, 255, 255, 0.6);
    --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: grid; grid-template-columns: auto minmax(0, 1fr) auto; 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);
}
.tool48-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.74);
    color: var(--primary);
    box-shadow: 0 8px 22px rgba(246,118,166,0.14);
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
    flex-shrink: 0;
}
.tool48-home-link:hover { color: var(--primary-hover); background: rgba(255,255,255,0.92); }
.brand { min-width: 0; 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 span { min-width: 0; 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;}
.account-wrap { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.account-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 170px;
    min-height: 38px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--tool48-account-border);
    background: var(--tool48-account-bg);
    color: var(--primary);
    box-shadow: 0 8px 22px rgba(246,118,166,0.14);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-toggle::before {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M7 20.7c1.2-2.1 3-3.2 5-3.2s3.8 1.1 5 3.2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M7 20.7c1.2-2.1 3-3.2 5-3.2s3.8 1.1 5 3.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.account-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(360px, calc(100vw - 24px));
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(255,255,255,0.78);
    box-shadow: 0 20px 60px rgba(27,35,48,0.18);
    display: grid;
    gap: 10px;
}
body.dark-mode .account-popover { background: rgba(30,30,30,0.96); border-color: rgba(255,255,255,0.08); }
.account-popover[hidden], .cloud-login-form[hidden], .cloud-user-section[hidden],
.save-popover[hidden], .cloud-save-dock[hidden] { display: none !important; }
.cloud-login-form { display: grid; gap: 8px; min-width: 0; }
.account-button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.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;}
.quick-save-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
    z-index: 30;
}
.save-popover-wrap {
    position: relative;
    display: flex;
    min-width: min(220px, 100%);
}
.save-dock-btn {
    width: 100%;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.72);
    background: rgba(255,255,255,0.72);
    color: var(--text-main);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    cursor: pointer;
    display: grid;
    gap: 2px;
    text-align: left;
    font: inherit;
    font-weight: 900;
}
.save-dock-btn:hover,
.save-dock-btn[aria-expanded="true"] {
    border-color: rgba(255,64,129,0.48);
    box-shadow: 0 8px 24px rgba(255,64,129,0.16);
}
.cloud-save-toggle {
    background: rgba(255,64,129,0.12);
    border-color: rgba(255,64,129,0.22);
}
.save-dock-sub {
    min-height: 1.2em;
    color: var(--text-sec);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
}
.save-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(380px, calc(100vw - 24px));
    padding: 14px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(255,255,255,0.78);
    box-shadow: 0 22px 60px rgba(27,35,48,0.20);
    display: grid;
    gap: 10px;
}
.cloud-save-popover {
    width: min(430px, calc(100vw - 24px));
}
.save-popover-title {
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 900;
}
body.dark-mode .save-dock-btn,
body.dark-mode .save-popover {
    background: rgba(30,30,30,0.96);
    border-color: rgba(255,255,255,0.08);
}
.schedule-rail-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: var(--radius-md);
    background: rgba(0,0,0,0.035);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.08);
}
body.dark-mode .schedule-rail-row { background: rgba(255,255,255,0.045); }
.schedule-rail {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.schedule-rail::-webkit-scrollbar { display: none; }
.schedule-rail-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--surface-light);
    color: var(--text-main);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
}
body.dark-mode .schedule-rail-arrow { background: rgba(255,255,255,0.08); }
.schedule-rail-expand {
    min-width: 74px;
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--surface-light);
    color: var(--text-main);
    cursor: pointer;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 900;
}
body.dark-mode .schedule-rail-expand { background: rgba(255,255,255,0.08); }
.schedule-chip {
    flex: 0 0 auto;
    max-width: min(280px, 72vw);
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: rgba(255,255,255,0.72);
    color: var(--text-main);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.schedule-chip.is-active {
    color: #fff;
    background: var(--primary);
    box-shadow: 0 8px 20px rgba(255,64,129,0.24);
}
body.dark-mode .schedule-chip { background: rgba(255,255,255,0.08); }
.schedule-rail-row.is-expanded {
    align-items: start;
}
.schedule-rail-row.is-expanded .schedule-rail {
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: min(42vh, 360px);
    padding-right: 4px;
    scrollbar-width: thin;
}
.schedule-rail-row.is-expanded .schedule-chip {
    flex: 1 1 180px;
    max-width: none;
    justify-content: center;
}
.schedule-rail-row.is-expanded .schedule-rail-arrow {
    opacity: 0.35;
    pointer-events: none;
}

/* 完美強制 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: 46%; background: linear-gradient(to top, rgba(0,0,0,0.58), rgba(0,0,0,0.18) 58%, transparent); z-index: 2; }
.cell-content { position: relative; z-index: 3; width: 100%; height: 100%; padding: 3.2cqw; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; transition: all 0.3s ease;}

.avatar-wrap { width: 48cqw; height: 48cqw; border-radius: 50%; box-shadow: 0 6px 15px rgba(0,0,0,0.16); background: #EEE; animation: float 6s ease-in-out infinite; border: 3px solid white; flex-shrink: 0; margin-bottom: 1cqw; transition: all 0.3s ease; margin-top: 3cqw;}
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: .4cqw; 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: 5.4cqw; color: var(--text-sec); font-weight: 700; transition: all 0.3s ease; margin-bottom: .4cqw;}
.cell-name { font-size: 12cqw; font-weight: 900; color: var(--text-main); line-height: 1.13; padding-bottom: .14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.cell-nick { font-size: 6.2cqw; 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 1px 3px rgba(0,0,0,0.42); }

.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 { display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:left; padding:16px 18px; color:var(--text-sec); font-size:0.85rem; margin-top:auto; line-height:1.6; background:rgba(255,255,255,0.46); border:1px solid rgba(255,255,255,0.68); border-radius:18px; box-shadow:0 10px 28px rgba(44,62,80,0.08); }
.app-footer p { margin: 0; }
.app-footer p + p { margin-top: 4px; font-weight: 800; }
.footer-copy { min-width:0; flex:1 1 360px; }
.footer-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:10px 14px; flex:0 0 auto; }
.footer-links a { display:inline-flex; align-items:center; gap:6px; color:var(--primary-hover); font-weight:900; text-decoration:none; white-space:nowrap; }
.footer-link-icon { width:14px; height:14px; flex:0 0 auto; background:currentColor; -webkit-mask:var(--footer-icon) center/contain no-repeat; mask:var(--footer-icon) center/contain no-repeat; }
.footer-link-icon-bug { --footer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 2 1.9 1.9'/%3E%3Cpath d='M14.1 3.9 16 2'/%3E%3Cpath d='M9 7h6'/%3E%3Cpath d='M8 7v8a4 4 0 0 0 8 0V7'/%3E%3Cpath d='M3 13h4'/%3E%3Cpath d='M17 13h4'/%3E%3Cpath d='m5 19 3-3'/%3E%3Cpath d='m19 19-3-3'/%3E%3C/svg%3E"); }
.footer-link-icon-heart { --footer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 21s-7.5-4.4-10-9.2C.3 8.5 2.3 4.5 6 4.2c2.1-.2 3.7.9 4.7 2.2.4.5 1 .5 1.4 0 1-1.3 2.6-2.4 4.7-2.2 3.7.3 5.7 4.3 4 7.6C19.5 16.6 12 21 12 21z'/%3E%3C/svg%3E"); }

.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;
}

.tool48-save-panel {
    padding: 14px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.42);
    border: 1px solid var(--glass-border);
}
body.dark-mode .tool48-save-panel { background: rgba(255,255,255,0.04); }
.cloud-status-pill,
.cloud-helper {
    margin: 0;
    color: var(--text-sec);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.5;
}
.cloud-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--primary);
    background: rgba(255,64,129,0.10);
}
.save-section {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    min-width: 0;
}
.save-section-title {
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 900;
}
.cloud-input {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--surface-light);
    color: var(--text-main);
    font: inherit;
    font-weight: 700;
    outline: none;
}
.cloud-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255,64,129,0.12);
}
body.dark-mode .cloud-input { background: #222; border-color: #444; }
.cloud-user-row {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}
.cloud-user-pill {
    min-width: 0;
    flex: 1;
    padding: 9px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.66);
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.dark-mode .cloud-user-pill { background: rgba(255,255,255,0.08); }
.compact-toggle {
    margin: 0;
    padding: 8px 10px;
}
.tool48-save-panel button[disabled],
.tool48-save-panel input[disabled],
.tool48-save-panel select[disabled],
.save-popover button[disabled],
.save-popover input[disabled],
.save-popover select[disabled],
.account-popover button[disabled],
.account-popover input[disabled] {
    cursor: not-allowed;
    opacity: 0.55;
}
.cloud-danger-btn {
    color: #D32F2F !important;
}
body.dark-mode .cloud-danger-btn {
    color: #FF8A80 !important;
}

@media (max-width: 560px) {
    body { font-size: 13px; line-height: 1.38; }
    .topbar { gap: 8px; padding: 8px; }
    .topbar-right { gap: 5px; min-width: 0; }
    .brand { min-width: 0; }
    .tool48-home-link { min-height: 32px; padding: 5px 8px; font-size: 0.7rem; }
    .lang-select { max-width: 82px; }
    .account-toggle {
        max-width: 92px;
        min-height: 32px;
        padding-inline: 10px;
        gap: 4px;
    }
    .account-toggle::before { width: 16px; height: 16px; }
    .account-popover {
        right: 0;
        width: calc(100vw - 16px);
    }
    .quick-save-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .save-popover-wrap {
        min-width: 0;
        width: 100%;
    }
    .save-dock-btn {
        min-height: 42px;
        padding: 7px 10px;
    }
    .save-popover {
        width: calc(100vw - 24px);
    }
    .quick-save-row .save-popover-wrap:nth-child(2) .save-popover {
        left: auto;
        right: 0;
    }
    .schedule-rail-row {
        grid-template-columns: 32px minmax(0, 1fr) 32px auto;
        gap: 6px;
        padding: 6px;
    }
    .schedule-rail-arrow {
        width: 32px;
        height: 32px;
    }
    .schedule-chip {
        max-width: 76vw;
        min-height: 36px;
        padding-inline: 10px;
    }
    .schedule-rail-expand {
        min-width: 58px;
        min-height: 32px;
        padding-inline: 8px;
    }
    .schedule-rail-row.is-expanded .schedule-chip {
        flex: 1 0 100%;
        width: 100%;
        flex-basis: 100%;
        max-width: none;
        min-height: 42px;
        white-space: normal;
        line-height: 1.28;
        text-align: left;
    }
    .schedule-rail-row.is-expanded {
        grid-template-columns: 32px 32px minmax(0, 1fr);
    }
    .schedule-rail-row.is-expanded .schedule-rail {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }
    .schedule-rail-row.is-expanded .schedule-rail-expand {
        grid-column: 3;
        justify-self: end;
    }
    .main-container { padding: 10px; gap: 10px; }
    .controls-panel { font-size: 0.78rem; }
    .control-group { margin-bottom: 14px; }
    .control-group label.title { margin-bottom: 8px; font-size: 0.78rem; }
    .preset-select { min-height: 36px; padding: 8px 28px 8px 10px; font-size: 0.74rem; line-height: 1.25; }
    button.btn { min-height: 34px; padding: 7px 8px; font-size: 0.72rem; border-radius: 12px; gap: 4px; }
    .grid-controls {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
    }
    .grid-controls .title { grid-column: 1 / -1; }
    .grid-controls .flex-btns { display: contents; }
    .grid-controls .btn { min-width: 0; padding: 7px 3px; font-size: 0.66rem; }
    .grid-controls .btn svg { width: 13px; height: 13px; }
    .display-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .display-controls .title { grid-column: 1 / -1; }
    .display-controls .toggle-label {
        margin: 0;
        min-width: 0;
        padding: 8px 7px;
        gap: 6px;
        font-size: 0.7rem;
        line-height: 1.25;
    }
    .toggle-label input { transform: scale(1); }
    #htmlGrid { gap: 10px; }
    #htmlGrid .grid-cell { flex: 0 0 calc((100% - 20px) / 3) !important; max-width: none !important; }
    .cell-content { padding: 2.6cqw; }
    .avatar-wrap { width: 50cqw; height: 50cqw; margin-top: 2cqw; margin-bottom: .5cqw; }
    .text-wrap { gap: .2cqw; }
    rt { font-size: 3.4cqw; }
    .cell-gen { font-size: 4.8cqw; margin-bottom: 0; }
    .cell-name { font-size: 12.5cqw; line-height: 1.12; padding-bottom: .12em; }
    .cell-nick { font-size: 5.6cqw; }
    .color-display { gap: 1cqw; padding-bottom: 1cqw; line-height: 1.05; }
}

/* Phase 2G account popover viewport guard. */
.account-popover {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 64px);
    overflow: auto;
    z-index: 250;
}

@media (max-width: 560px) {
    .account-popover {
        position: fixed;
        top: 52px;
        right: 8px;
        left: 8px;
        width: auto;
    }
    .account-toggle {
        max-width: min(124px, 32vw);
    }
    .app-footer {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px 10px;
        padding: 8px 10px;
        text-align: left;
        font-size: 0.6rem;
        line-height: 1.35;
    }
    .footer-copy { flex: 1 1 220px; }
    .footer-copy p { display: inline; }
    .footer-copy p + p { margin-top: 0; }
    .footer-copy p + p::before { content: " "; }
    .footer-links { width: auto; gap: 8px 10px; flex: 0 0 auto; }
    .footer-link-icon { width: 12px; height: 12px; }
}

/* Mobile compact pass: placed last so the GitHub Pages build cannot be pulled back by earlier rules. */
@media (max-width: 560px) {
    body { font-size: 12.5px; line-height: 1.34; }
    .main-container { padding: 9px !important; gap: 9px !important; }
    .panel { padding: 12px !important; border-radius: 18px; }
    .controls-panel { font-size: 0.74rem !important; }
    .control-group { margin-bottom: 12px !important; }
    .control-group label.title {
        margin-bottom: 7px !important;
        font-size: 0.72rem !important;
        line-height: 1.22 !important;
    }
    .controls-row,
    .select-group { gap: 6px !important; }
    .select-group { margin-top: 6px !important; }
    #presetSelector,
    #genSelector,
    #scheduleSelector,
    .preset-select {
        min-height: 34px !important;
        padding: 7px 26px 7px 9px !important;
        font-size: 0.7rem !important;
        line-height: 1.22 !important;
        border-radius: 8px !important;
    }
    .title-input-wrapper {
        padding: 8px 10px !important;
        gap: 7px !important;
        margin-bottom: 0 !important;
    }
    .title-input-wrapper .icon-btn {
        width: 28px !important;
        height: 28px !important;
    }
    .custom-title-input {
        font-size: 0.9rem !important;
        line-height: 1.22 !important;
        padding-bottom: 2px !important;
    }
    .quick-save-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .save-popover-wrap {
        min-width: 0 !important;
        width: 100% !important;
    }
    .save-dock-btn {
        min-height: 34px !important;
        padding: 5px 7px !important;
        gap: 0 !important;
        font-size: 0.66rem !important;
        line-height: 1.12 !important;
        border-radius: 12px !important;
    }
    .save-dock-sub {
        min-height: 1em !important;
        font-size: 0.58rem !important;
        line-height: 1.05 !important;
    }
    .save-popover,
    .account-popover { font-size: 0.72rem !important; }
    .save-popover-title,
    .save-section-title {
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
    }
    .cloud-helper,
    .cloud-status-pill,
    .cloud-user-pill {
        font-size: 0.66rem !important;
        line-height: 1.2 !important;
    }
    .cloud-input {
        min-height: 34px !important;
        padding: 7px 9px !important;
        font-size: 0.72rem !important;
    }
    .account-button-row,
    .cloud-save-actions,
    .flex-btns { gap: 5px !important; }
    .schedule-rail-row {
        grid-template-columns: 28px minmax(0, 1fr) 28px auto !important;
        gap: 5px !important;
        padding: 5px !important;
    }
    .schedule-rail { gap: 6px !important; }
    .schedule-rail-arrow {
        width: 28px !important;
        height: 28px !important;
        font-size: 1rem !important;
    }
    .schedule-chip {
        max-width: 70vw !important;
        min-height: 32px !important;
        padding: 6px 8px !important;
        font-size: 0.68rem !important;
        line-height: 1.18 !important;
    }
    .schedule-rail-expand {
        min-width: 48px !important;
        min-height: 28px !important;
        padding: 5px 7px !important;
        font-size: 0.66rem !important;
    }
    .schedule-rail-row.is-expanded .schedule-chip {
        min-height: 36px !important;
        line-height: 1.2 !important;
    }
    .grid-controls {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }
    .grid-controls .title { grid-column: 1 / -1 !important; }
    .grid-controls .flex-btns { display: contents !important; }
    .grid-controls .btn {
        min-width: 0 !important;
        min-height: 32px !important;
        padding: 7px 2px !important;
        font-size: 0.62rem !important;
    }
    .display-controls {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .display-controls .title { grid-column: 1 / -1 !important; }
    .display-controls .toggle-label {
        margin: 0 !important;
        padding: 7px 6px !important;
        font-size: 0.68rem !important;
        line-height: 1.18 !important;
    }
    #htmlGrid { gap: 10px !important; }
    #htmlGrid .grid-cell {
        flex: 0 0 calc((100% - 20px) / 3) !important;
        max-width: none !important;
    }
    .cell-overlay {
        height: 42%;
        background: linear-gradient(to top, rgba(0,0,0,0.42), rgba(0,0,0,0.12) 60%, transparent) !important;
    }
    .avatar-wrap {
        width: 50cqw !important;
        height: 50cqw !important;
        margin-top: 2cqw !important;
        margin-bottom: 0.5cqw !important;
    }
    .text-wrap { gap: 0.2cqw !important; }
    .cell-gen { font-size: 4.8cqw !important; margin-bottom: 0 !important; }
    .cell-name { font-size: 12.5cqw !important; line-height: 1.12 !important; padding-bottom: .12em !important; }
    .cell-nick { font-size: 5.6cqw !important; }
}