@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600&display=swap');

body {
    font-family: 'Prompt', sans-serif; 
    padding: 20px; 
    max-width: 650px; 
    margin: auto; 
    
    /* พื้นหลังสไตล์ลายตารางร่างแบบ (Grid) สีชมพูอ่อนๆ ละมุนๆ */
    background-color: #fff5f7; 
    background-image: 
        linear-gradient(#ffe4e8 1.5px, transparent 1.5px), 
        linear-gradient(90deg, #ffe4e8 1.5px, transparent 1.5px);
    background-size: 25px 25px;
    
    min-height: 100vh; 
    color: #5d4037; /* ใช้สีตัวอักษรน้ำตาลตุ่นแทนสีดำ เพื่อความซอฟต์ */
    transition: background-color 0.35s ease, color 0.35s ease;
}

/* -------------------------------------- */
/* ดีไซน์เมนู Tabs                         */
/* -------------------------------------- */
.tabs {
    display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px;
    margin: max(12px, env(safe-area-inset-top)) 0 25px;
    padding: 8px 4px 6px; box-sizing: border-box;
}
.tab-btn {
    min-width: 0; width: 100%;
    background: #ffffff; 
    color: #a1887f; 
    border: 2px solid #ffe4e8; 
    padding: 12px 10px;
    border-radius: 30px; 
    font-family: 'Prompt', sans-serif; 
    font-size: 14px;
    font-weight: 500;
    cursor: pointer; 
    transition: all 0.3s ease; 
    box-shadow: 0 4px 10px rgba(255, 182, 193, 0.1);
}
.tab-btn.active {
    background: linear-gradient(135deg, #ffb6c1 0%, #ffc0cb 100%); 
    color: #ffffff;
    border-color: #ffb6c1;
    box-shadow: 0 6px 15px rgba(255, 182, 193, 0.4);
}
.tab-btn:hover:not(.active) { background: #fff0f3; color: #8d6e63; transform: translateY(-2px); }
.tab-content { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* -------------------------------------- */

.container { 
    background: rgba(255, 255, 255, 0.95); /* กล่องขาวโปร่งแสงนิดๆ */
    backdrop-filter: blur(10px);
    padding: 35px 30px; 
    border-radius: 28px; 
    box-shadow: 0 15px 35px rgba(255, 182, 193, 0.15); /* เงาสีชมพูอ่อน */
    border: 1px solid #fff0f3;
}
h2 { text-align: center; font-weight: 600; color: #5d4037; margin-bottom: 5px; margin-top: 0; }
.subtitle { text-align: center; color: #a1887f; font-size: 14px; font-weight: 300; margin-bottom: 25px; }

/* -------------------------------------- */
/* แปลงโฉมปุ่มอัปโหลดไฟล์ (Choose File)       */
/* -------------------------------------- */
input[type="file"] { 
    width: 100%; 
    padding: 10px 15px; 
    margin-bottom: 15px; 
    border: 2px dashed #ffb6c1; 
    border-radius: 18px; 
    box-sizing: border-box; 
    font-family: 'Prompt', sans-serif; 
    font-size: 14px;
    color: #8d6e63;
    transition: all 0.3s ease; 
    background-color: #fff9fa;
    cursor: pointer;
}
input[type="file"]:hover { border-color: #ff99a8; background-color: #fff0f3; }

/* แต่งปุ่ม Choose File ย่อยข้างใน ให้เป็นปุ่มน่ารักๆ */
input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, #ffc0cb 0%, #ffb6c1 100%);
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    color: white;
    font-family: 'Prompt', sans-serif;
    font-weight: 500;
    cursor: pointer;
    margin-right: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(255, 182, 193, 0.4);
}
input[type="file"]::file-selector-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 182, 193, 0.6);
    background: linear-gradient(135deg, #ffb6c1 0%, #ff99a8 100%);
}

input[type="text"] { 
    width: 100%; padding: 12px 15px; margin-bottom: 15px; 
    border: 2px solid #ffe4e8; border-radius: 16px; box-sizing: border-box;
    background-color: #ffffff; font-family: 'Prompt', sans-serif; color: #5d4037;
    transition: all 0.3s ease;
}
input[type="text"]:focus { 
    outline: none; border-color: #ffb6c1; 
    box-shadow: 0 0 0 4px rgba(255, 182, 193, 0.2); 
}

/* -------------------------------------- */
/* กล่องพรีวิวรูปภาพ                         */
/* -------------------------------------- */
.gallery-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); /* จาก 3 เป็น 2 คอลัมน์ */
    gap: 20px; /* เพิ่มระยะห่างระหว่างรูป */
    min-height: 200px; /* เพิ่มความสูงพื้นที่ให้ลากง่าย */
    padding: 25px; 
    border: 2px dashed #ffe4e8; 
    border-radius: 20px; 
    background: #fffcfd; 
    margin-bottom: 25px; 
}

.img-card { 
    position: relative; 
    width: 100%; 
    aspect-ratio: 1 / 1.414; 
    border-radius: 10px; 
    overflow: hidden; 
    cursor: grab; 
    touch-action: none; /* เพิ่มบรรทัดนี้ เพื่อให้ลากได้ลื่นขึ้นบนมือถือ */
    box-shadow: 0 6px 12px rgba(255, 182, 193, 0.15); 
    transition: transform 0.2s ease; 
}
.img-card:active { cursor: grabbing; transform: scale(1.08) rotate(2deg); box-shadow: 0 15px 25px rgba(255, 182, 193, 0.3); z-index: 10; }
.img-card img { width: 100%; height: 100%; object-fit: cover; }

.page-badge {
    position: absolute; top: 8px; left: 8px; background: rgba(255, 255, 255, 0.85); color: #ff6b81;
    padding: 4px 12px; border-radius: 14px; font-size: 11px; font-weight: 600; z-index: 5;
    backdrop-filter: blur(4px); pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.delete-btn {
    position: absolute; top: 6px; right: 6px;z-index: 1; background: rgba(255, 107, 129, 0.9); color: white;
    border: none; border-radius: 50%; width: 26px; height: 26px; font-size: 12px; font-weight: bold;
    cursor: pointer; z-index: 15; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px); transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(255, 107, 129, 0.3);
}
.delete-btn:hover { background: rgba(255, 71, 87, 1); transform: scale(1.15) rotate(90deg); }
.rotate-btn {
    position: absolute; top: 38px; right: 6px; z-index: 15; width: 30px; height: 30px;
    border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #d95f82;
    font-size: 19px; cursor: pointer; box-shadow: 0 2px 7px rgba(0,0,0,.15);
}
.app-version {
    position: fixed; left: 10px; bottom: 9px; z-index: 80;
    padding: 4px 8px; border: 1px solid rgba(141,110,99,.16); border-radius: 999px;
    background: rgba(255,255,255,.72); color: #9a7b72; font-size: 9px; font-weight: 600;
    line-height: 1; backdrop-filter: blur(7px); pointer-events: none;
}
body.dark-mode .app-version { background: rgba(29,23,37,.78); color: #ab9ab2; border-color: rgba(203,187,210,.15); }
.rotate-btn:hover { transform: rotate(45deg); }
.img-card > img { transition: transform .2s ease; background: #fff; }

.pdf-options {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    margin: -8px 0 15px; padding: 12px; border-radius: 16px; background: #fff9fa;
    border: 1px solid #ffe4e8;
}
.pdf-options label { display: grid; gap: 4px; color: #8d6e63; font-size: 10px; }
.pdf-options select {
    min-width: 0; width: 100%; min-height: 40px; padding: 7px 5px;
    border: 1px solid #ffe4e8; border-radius: 10px; background: #fff;
    color: #5d4037; font: 11px 'Prompt', sans-serif;
}
body.dark-mode .pdf-options { background: #1d1725; border-color: #4b3b59; }
body.dark-mode .pdf-options label { color: #cbbbd2; }
body.dark-mode .pdf-options select { background: #2a2133; color: #f6eaf5; border-color: #554060; }

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

.dl-img-btn {
    position: absolute; z-index: 8; top: 8px; right: 8px; width: auto;
    background: rgba(255,255,255,.94); backdrop-filter: blur(4px);
    color: #e86691; text-align: center; padding: 7px 11px; border: 1px solid #ffe4e8;
    border-radius: 13px; font-size: 11px; font-weight: 600; text-decoration: none;
    cursor: pointer; transition: transform .2s, background .2s, color .2s;
}
.dl-img-btn:hover { background: #ff99a8; color: white; transform: translateY(-1px); }
.extract-status {
    margin: -4px 0 12px; padding: 10px 13px; border-radius: 12px;
    background: #fff3f6; color: #8d6e63; font-size: 11px; text-align: center;
}
.pdf-page-card { cursor: default; touch-action: auto; background: #fff; }
.pdf-page-card:active { transform: none; box-shadow: 0 6px 12px rgba(255,182,193,.15); }
.pdf-page-card img { object-fit: contain; box-sizing: border-box; }
body.dark-mode .extract-status { background: #251d2e; color: #cbbbd2; }

/* -------------------------------------- */
/* กลุ่มปุ่มกดด้านล่าง                        */
/* -------------------------------------- */
.btn-group { display: flex; gap: 12px; }
.btn { 
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); 
    color: #5d4037; border: none; padding: 16px; border-radius: 18px; 
    cursor: pointer; font-size: 16px; font-weight: 600; font-family: 'Prompt', sans-serif; 
    width: 100%; box-shadow: 0 6px 15px rgba(255, 154, 158, 0.3); transition: all 0.3s ease; 
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 154, 158, 0.45); }
.btn:active { transform: translateY(1px); }

.btn-outline { 
    background: #ffffff; color: #ff9a9e; border: 2px solid #ff9a9e; box-shadow: none; 
}
.btn-outline:hover { 
    background: #fff9fa; border-color: #ff7e82; color: #ff7e82; box-shadow: 0 6px 15px rgba(255, 154, 158, 0.2); 
}

/* ใส่เพิ่มต่อท้ายไฟล์ style.css */
.sortable-ghost {
    opacity: 0.4;
    border: 2px dashed #ffb6c1 !important;
    background: #fff0f3 !important;
}

.sortable-drag {
    cursor: grabbing !important;
    transform: rotate(3deg) scale(1.05);
    box-shadow: 0 20px 30px rgba(0,0,0,0.15) !important;
}
/* ========================================= */
/* ลูกเล่นที่ 1: โหมดกลางคืน (Dark Mode) */
/* ========================================= */
.dark-mode-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    z-index: 100;
    transition: 0.3s;
}

body.dark-mode {
    background-color: #17131f;
    background-image:
        linear-gradient(rgba(190, 156, 255, 0.08) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(190, 156, 255, 0.08) 1.5px, transparent 1.5px),
        radial-gradient(circle at top, #2b2038 0%, #17131f 62%);
    background-size: 25px 25px, 25px 25px, 100% 100%;
    color: #f7edf7;
}
.app-connectivity {
    position: absolute; top: 18px; left: 18px; z-index: 100;
    display: flex; align-items: center; gap: 7px;
}
.online-status, .mini-app-btn {
    min-height: 32px; padding: 6px 10px; box-sizing: border-box; border-radius: 16px;
    background: rgba(255,255,255,.9); color: #47755c; border: 1px solid #e3eee7;
    font: 500 10px 'Prompt', sans-serif; box-shadow: 0 3px 10px rgba(0,0,0,.07);
}
.online-status::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #37b56e; }
.online-status.offline { color: #a44f60; }
.online-status.offline::before { background: #e25d75; }
.mini-app-btn { color: #d95f82; cursor: pointer; }
body.dark-mode .online-status, body.dark-mode .mini-app-btn { background: #342740; color: #e8d7ed; border-color: #594466; }
body.dark-mode .container {
    background: rgba(36, 29, 46, 0.94);
    border-color: rgba(212, 177, 255, 0.16);
    box-shadow: 0 18px 50px rgba(5, 3, 12, 0.48), inset 0 1px rgba(255,255,255,0.03);
}
body.dark-mode .tab-btn {
    background: rgba(38, 30, 49, 0.92); color: #d8cae3;
    border-color: #443651; box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
body.dark-mode .tab-btn:hover:not(.active) { background: #34283f; color: #ffe5f0; }
body.dark-mode .tab-btn.active {
    background: linear-gradient(135deg, #b983ff 0%, #ff8fbc 100%);
    border-color: transparent; color: #211728;
    box-shadow: 0 8px 22px rgba(185, 131, 255, 0.28);
}
body.dark-mode h2 { color: #ffe4f0; }
body.dark-mode .subtitle { color: #b9aabd; }
body.dark-mode .gallery-grid { background: rgba(22, 17, 29, 0.78); border-color: #4b3b59; }
body.dark-mode input[type="file"], body.dark-mode input[type="text"] {
    background: #1d1725; color: #f6eaf5; border-color: #544060;
}
body.dark-mode input[type="file"]:hover { background: #271e30; border-color: #b983ff; }
body.dark-mode input[type="text"]:focus { border-color: #c490ff; box-shadow: 0 0 0 4px rgba(185,131,255,0.16); }
body.dark-mode .btn-outline, body.dark-mode .tool-btn {
    background: #251d2e; color: #f4a7c4; border-color: #6d506e;
}
body.dark-mode .btn-outline:hover, body.dark-mode .tool-btn:hover { background: #30243a; border-color: #e69abb; }
body.dark-mode .page-badge { background: rgba(32,24,39,0.9); color: #ff9fc3; }
body.dark-mode .dl-img-btn { background: rgba(32,24,39,0.94); color: #ff9fc3; border-color: #4b3b59; }
body.dark-mode .bubble-grid { background: rgba(185,131,255,0.09); }
body.dark-mode .bubble { background: radial-gradient(circle at 30% 30%, #f9eaff, #9c72ca); }
body.dark-mode .dark-mode-btn { background: #342740; color: #ffe4f0; box-shadow: 0 6px 18px rgba(0,0,0,0.35); }

@media (max-width:520px) {
    .tabs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .tab-btn { min-height: 48px; padding: 10px 7px; font-size: 13px; }
}

/* ========================================= */
/* ลูกเล่นที่ 2: บับเบิ้ลกันกระแทก */
/* ========================================= */
.bubble-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    padding: 20px;
    background: rgba(255, 182, 193, 0.2);
    border-radius: 15px;
}
.bubble {
    width: 100%;
    aspect-ratio: 1/1;
    padding: 0; border: 0;
    background: radial-gradient(circle at 30% 30%, #fff, #ffb6c1);
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1), inset -2px -2px 5px rgba(255,105,180,0.2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform .1s;
}
.bubble:active { transform: scale(.9); }
.bubble.popped {
    background: transparent;
    border: 1px solid #ffb6c1;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.05);
    opacity: 0.5;
    cursor: default;
}
.bubble:focus-visible { outline: 3px solid #ff7fa6; outline-offset: 3px; }

/* ของเล่นสกุชชี่คนละหน้ากับบับเบิ้ล */
.squishy-stage {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 430px; padding: 24px; box-sizing: border-box;
    overflow: hidden; border-radius: 28px; touch-action: none;
    isolation: isolate;
    background: radial-gradient(circle at 50% 38%,#fffafd 0,#f5e5f0 52%,#dfcfdd 100%);
    border: 1px solid #f3dce8;
}
.squishy-toy {
    --move-x: 0px; --move-y: 0px; --stretch-x: 1; --stretch-y: 1; --tilt: 0deg;
    --press-x: 50%; --press-y: 50%;
    position: relative; z-index: 2; display: none; flex: 0 0 auto; width: min(42vw,240px); aspect-ratio: .92;
    padding: 0; border: 0; border-radius: 38% 38% 44% 44%; cursor: grab;
    background: radial-gradient(circle at 28% 20%,rgba(255,255,255,.86) 0 6%,rgba(255,255,255,.28) 7% 24%,transparent 25%),linear-gradient(145deg,rgba(255,214,232,.94),rgba(244,137,184,.88) 70%,rgba(214,89,145,.92));
    box-shadow: inset 18px 20px 25px rgba(255,255,255,.4),inset -15px -18px 24px rgba(135,45,91,.2),0 28px 38px rgba(123,55,92,.3),0 0 28px rgba(255,145,194,.18);
    transform: translate(var(--move-x),var(--move-y)) rotate(var(--tilt)) scale(var(--stretch-x),var(--stretch-y));
    transform-origin: center; touch-action: none; -webkit-tap-highlight-color: transparent;
    will-change: transform; contain: layout style;
    transition: transform .72s cubic-bezier(.16,1.3,.28,1.18),background .25s,filter .2s;
}
.squishy-toy.active { display: block; }
.squishy-toy.active:not(.grabbing):not(.rebounding) { animation: jelly-idle 2.4s ease-in-out infinite; }
.squishy-toy.grabbing { z-index: 5; cursor: grabbing; filter: saturate(1.12) brightness(1.04); }
.squishy-toy.grabbing:not(.multi-touch) { transition: transform .1s cubic-bezier(.2,.9,.32,1.18),background .12s,filter .2s; }
.squishy-toy.grabbing.multi-touch { transition: background .12s,filter .2s; }
.squishy-toy.rebounding { animation: foam-recover .7s ease-out; }
.squishy-toy[data-color="purple"] { border-radius: 48% 48% 40% 40%; background: radial-gradient(circle at 28% 20%,rgba(255,255,255,.8) 0 6%,rgba(255,255,255,.25) 7% 24%,transparent 25%),linear-gradient(145deg,rgba(231,215,255,.95),rgba(165,125,222,.9) 72%,rgba(124,82,183,.94)); }
.squishy-toy[data-color="mint"] { border-radius: 52% 48% 44% 56% / 38% 42% 58% 62%; background: radial-gradient(circle at 28% 20%,rgba(255,255,255,.8) 0 6%,rgba(255,255,255,.25) 7% 24%,transparent 25%),linear-gradient(145deg,rgba(211,255,239,.95),rgba(103,205,164,.9) 72%,rgba(54,161,123,.94)); }
.slime-toy {
    width: min(52vw,220px); aspect-ratio: 1;
    border-radius: 48% 52% 46% 54%;
    box-shadow: inset 18px 20px 25px rgba(255,255,255,.55),inset -15px -18px 25px rgba(95,57,132,.18),0 26px 38px rgba(111,72,154,.24);
}
.slime-toy[data-color="pink"] { background: linear-gradient(145deg,#ffd9e8 5%,#ff9fc4 72%,#ee78a8); }
.slime-toy[data-color="purple"] { background: linear-gradient(145deg,#eadcff 5%,#b994ef 72%,#9369d0); }
.slime-toy[data-color="mint"] { background: linear-gradient(145deg,#ddfff2 5%,#89dfbd 72%,#55bd98); }
.slime-toy::before, .slime-toy::after { display: none; }
.squishy-accessory { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.squishy-accessory::before, .squishy-accessory::after { content: ''; position: absolute; }
.squishy-toy[data-color="pink"] .squishy-accessory::before,
.squishy-toy[data-color="pink"] .squishy-accessory::after {
    width: 38%; height: 38%; top: -10%; border-radius: 50%; background: #ee91b5;
}
.squishy-toy[data-color="pink"] .squishy-accessory::before { left: 2%; }
.squishy-toy[data-color="pink"] .squishy-accessory::after { right: 2%; }
.squishy-toy[data-color="purple"] .squishy-accessory::before,
.squishy-toy[data-color="purple"] .squishy-accessory::after {
    width: 28%; height: 58%; top: -38%; border-radius: 55% 55% 42% 42%; background: #ad8adb;
}
.squishy-toy[data-color="purple"] .squishy-accessory::before { left: 18%; transform: rotate(-8deg); }
.squishy-toy[data-color="purple"] .squishy-accessory::after { right: 18%; transform: rotate(8deg); }
.squishy-toy[data-color="mint"] .squishy-accessory::before {
    width: 34%; height: 18%; left: 43%; top: -7%; border-radius: 90% 10% 90% 10%;
    background: #4ca67e; transform: rotate(-24deg);
}
.squishy-shine {
    position: absolute; left: var(--press-x); top: var(--press-y); width: 58px; height: 34px;
    border-radius: 50%; opacity: .42; pointer-events: none; transform: translate(-50%,-50%);
    background: rgba(255,255,255,.48); box-shadow: inset 0 9px 13px rgba(107,49,79,.12),0 2px 8px rgba(255,255,255,.4);
    transition: opacity .12s;
}
.slime-toy .squishy-shine {
    left: 18%; top: 16%; width: 36%; height: 19%; opacity: 1;
    transform: rotate(-25deg); background: rgba(255,255,255,.42); filter: blur(2px);
    box-shadow: none;
}
.slime-toy.grabbing .squishy-shine { opacity: 1; transform: rotate(-25deg); }
.squishy-toy.grabbing .squishy-shine { opacity: .9; transform: translate(-50%,-50%) scale(1.18,.72); }
.squishy-toy.multi-touch .squishy-face b { height: 7px; border-radius: 50%; border-width: 3px; }
.squishy-toy.grabbing .squishy-face { transform: translate(-50%,-50%) scale(1.08,.9); }
.squishy-face { position: absolute; left: 50%; top: 52%; display: flex; align-items: center; gap: 18px; transform: translate(-50%,-50%); }
.squishy-face i { width: 10px; height: 15px; border-radius: 50%; background: #60404f; }
.squishy-face b { width: 23px; height: 12px; border: 4px solid #60404f; border-top: 0; border-radius: 0 0 20px 20px; }
.squishy-hint { margin: 12px 0; color: #8d6e63; font-size: 12px; text-align: center; }
.squishy-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.squishy-controls button { min-width: 46px; min-height: 44px; padding: 8px 12px; border: 1px solid #f0d5e1; border-radius: 14px; background: #fff9fc; color: #795548; font: 12px 'Prompt',sans-serif; cursor: pointer; }
.squishy-controls button.active { border-color: #e887b5; box-shadow: 0 0 0 3px rgba(232,135,181,.15); }
body.dark-mode .squishy-stage { background: radial-gradient(circle at 50% 42%,#2b2134,#17121d 72%); border-color: #4b3b59; }
body.dark-mode .squishy-hint { color: #cbbbd2; }
body.dark-mode .squishy-controls button { background: #251d2e; color: #ffe4f0; border-color: #594466; }
@keyframes foam-recover {
    0%{transform:scale(.66,1.3) rotate(-3deg)} 22%{transform:scale(1.24,.72) rotate(3deg)}
    43%{transform:scale(.82,1.16) rotate(-2deg)} 62%{transform:scale(1.11,.9) rotate(1deg)}
    80%{transform:scale(.96,1.05)} 100%{transform:scale(1)}
}
@keyframes jelly-idle { 0%,100%{transform:translateY(0) scale(1)} 45%{transform:translateY(-5px) scale(1.025,.975)} 70%{transform:translateY(1px) scale(.99,1.01)} }
.squishy-spark {
    position: absolute; z-index: 9; color: var(--spark-color); font-size: 19px; font-weight: 700;
    pointer-events: none; text-shadow: 0 2px 6px rgba(255,255,255,.8);
    animation: squishy-spark-fly .72s ease-out forwards;
}
@keyframes squishy-spark-fly { from{opacity:1;transform:translate(-50%,-50%) scale(.4) rotate(0)} to{opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(1.3) rotate(130deg)} }
@media (max-width:520px) {
    .squishy-stage { min-height: 390px; gap: 7px; padding: 16px 8px; background: radial-gradient(circle at 50% 35%,#fff6fc,#ead8e6); }
    .squishy-toy {
        width: min(56vw,215px); transition: background .18s;
        box-shadow: inset 13px 15px 20px rgba(255,255,255,.35),inset -10px -12px 18px rgba(90,45,70,.16),0 20px 28px rgba(80,46,67,.26),0 0 22px rgba(255,145,194,.16);
    }
    .slime-toy { width: min(58vw,205px); }
    .squishy-toy.rebounding { animation-duration: .52s; }
    .squishy-shine { box-shadow: 0 2px 8px rgba(255,255,255,.35); }
    .squishy-face { gap: 11px; }
    .squishy-face i { width: 7px; height: 11px; }
    .squishy-face b { width: 17px; height: 9px; border-width: 3px; }
    body.dark-mode .squishy-stage { background: radial-gradient(circle at 50% 35%,#2b2134,#151019); }
}
@media (prefers-reduced-motion:reduce) { .squishy-toy{transition:none}.squishy-toy.rebounding,.squishy-toy.active{animation:none} }

/* เครื่องคำนวณสเกลและหน่วย */
.scale-tool-page { max-width: 920px; }
.scale-section-nav {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
    margin: 22px 0 14px; padding: 6px; border-radius: 18px;
    background: #f8edf3; border: 1px solid #f0d8e4;
}
.scale-section-nav button,
.scale-mode-switch button,
.scale-presets button {
    min-height: 46px; border: 0; border-radius: 13px; background: transparent;
    color: #846675; font: 600 14px 'Prompt',sans-serif; cursor: pointer;
    transition: transform .18s,background .18s,color .18s,box-shadow .18s;
}
.scale-section-nav button:hover,
.scale-mode-switch button:hover,
.scale-presets button:hover { transform: translateY(-1px); }
.scale-section-nav button.active,
.scale-mode-switch button.active {
    color: #593a4a; background: #fff; box-shadow: 0 5px 16px rgba(126,76,101,.12);
}
.scale-panel {
    padding: 24px; border: 1px solid #efdce6; border-radius: 24px;
    background: rgba(255,255,255,.72); text-align: left;
}
.scale-panel[hidden] { display: none; }
.scale-panel-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.scale-panel-icon {
    display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center;
    border-radius: 15px; background: linear-gradient(145deg,#ffe5ef,#efceff); font-size: 23px;
}
.scale-panel-heading h3 { margin: 0 0 3px; color: #5d404f; font-size: 20px; }
.scale-panel-heading p { margin: 0; color: #9a7d8b; font-size: 13px; }
.scale-mode-switch {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    margin-bottom: 20px; padding: 5px; border-radius: 16px; background: #f7edf2;
}
.calculator-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.calculator-field { display: grid; align-content: start; gap: 7px; min-width: 0; color: #7d6170; font-size: 12px; font-weight: 600; }
.calculator-field input,
.calculator-field select,
.unit-output {
    box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 12px;
    border: 1px solid #e7cedb; border-radius: 13px; outline: none;
    background: #fff; color: #563e4a; font: 600 15px 'Prompt',sans-serif;
}
.calculator-field input:focus,
.calculator-field select:focus { border-color: #dd83ac; box-shadow: 0 0 0 3px rgba(221,131,172,.15); }
.custom-scale-input { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 8px; }
.custom-scale-input[hidden] { display: none; }
.custom-scale-input > span { color: #a16d86; font-size: 15px; }
.custom-scale-input input { min-height: 42px; }
.field-with-unit { display: grid; grid-template-columns: minmax(92px,.8fr) minmax(0,1.2fr); width: 100%; }
.field-with-unit input { min-width: 0; border-radius: 13px 0 0 13px; font-variant-numeric: tabular-nums; }
.field-with-unit select,
.field-with-unit > span {
    display: grid; min-width: 0; padding: 0 10px; place-items: center;
    border: 1px solid #e7cedb; border-left: 0; border-radius: 0 13px 13px 0;
    background: #fff8fb; color: #765967; font: 600 13px 'Prompt',sans-serif;
}
.scale-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.scale-presets > span { margin-right: 4px; color: #9a7d8b; font-size: 12px; }
.scale-presets button { min-height: 36px; padding: 6px 12px; border: 1px solid #ead2df; background: #fff; }
.scale-presets button.active { color: #fff; border-color: #dc82ad; background: linear-gradient(135deg,#c983ed,#f287b8); box-shadow: 0 5px 12px rgba(209,111,166,.22); }
.calculator-result {
    position: relative; overflow: hidden; padding: 20px; border-radius: 19px;
    background: linear-gradient(135deg,#fff0f6,#f4e8ff); border: 1px solid #efd5e6;
}
.calculator-result::after {
    content: '📐'; position: absolute; right: 16px; bottom: -13px;
    font-size: 70px; opacity: .09; transform: rotate(-10deg);
}
.result-kicker { display: block; margin-bottom: 4px; color: #a16d86; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.calculator-result strong { display: block; color: #71455d; font-size: clamp(22px,4vw,32px); }
.calculator-result p { position: relative; z-index: 1; margin: 5px 0 0; color: #8d6f7e; font-size: 13px; }
.unit-category-field { width: min(280px,100%); margin-bottom: 18px; }
.unit-converter-row { display: grid; grid-template-columns: 1fr 48px 1fr; align-items: end; gap: 12px; }
.unit-converter-row .calculator-field { grid-template-rows: auto auto auto; }
.unit-output { display: flex; align-items: center; overflow-x: auto; background: #fff8fb; font-size: 19px; }
.swap-units-btn {
    width: 48px; height: 48px; margin-bottom: 0; border: 1px solid #e6cddd; border-radius: 50%;
    background: #fff; color: #c05e8d; font-size: 22px; cursor: pointer; transition: transform .2s;
}
.swap-units-btn:hover { transform: rotate(180deg); }
.unit-equation { margin: 20px 0 0; padding: 16px; border-radius: 15px; background: #f8edf3; color: #684c5a; text-align: center; font-weight: 600; }
.paper-check-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(230px,.8fr); gap: 24px; align-items: center; }
.paper-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
.paper-preview-wrap { display: grid; min-height: 250px; padding: 18px; place-items: center; border-radius: 20px; background: #f5ebf1; }
.paper-preview {
    overflow: hidden; width: min(100%,250px); aspect-ratio: 1 / 1.414; padding: 8%; box-sizing: border-box;
    background: #fff; border: 1px solid #e5dce1; border-radius: 4px; box-shadow: 0 12px 28px rgba(86,56,71,.16);
    transition: width .25s,aspect-ratio .25s;
}
.paper-preview.landscape { width: min(100%,300px); aspect-ratio: 1.414 / 1; }
.paper-safe-area { position: relative; width: 100%; height: 100%; border: 1px dashed #e5b9ce; }
.drawing-preview {
    position: absolute; left: 50%; top: 50%; display: grid; width: 45%; height: 60%;
    place-items: center; transform: translate(-50%,-50%); border: 2px solid #c7759d;
    border-radius: 3px; background: repeating-linear-gradient(45deg,rgba(226,133,177,.12) 0 6px,rgba(197,117,157,.03) 6px 12px);
    color: #a6557c; font-size: 11px; transition: width .25s,height .25s,background .2s;
}
.drawing-preview.too-large { border-color: #dc5a70; background: rgba(239,91,117,.14); color: #b83d54; }
.paper-result { margin-top: 20px; padding: 17px 19px; border-radius: 17px; border: 1px solid #ccebdc; background: #ecfbf4; }
.paper-result strong { color: #267655; }
.paper-result p { margin: 4px 0 0; color: #668478; font-size: 13px; }
.paper-result.does-not-fit { border-color: #f1c4cb; background: #fff0f2; }
.paper-result.does-not-fit strong { color: #b64459; }
.paper-result.does-not-fit p { color: #936b72; }
body.dark-mode .scale-section-nav,
body.dark-mode .scale-mode-switch,
body.dark-mode .paper-preview-wrap { background: #1a1421; border-color: #4c3b56; }
body.dark-mode .scale-section-nav button,
body.dark-mode .scale-mode-switch button,
body.dark-mode .scale-presets button { color: #cbb7c5; }
body.dark-mode .scale-section-nav button.active,
body.dark-mode .scale-mode-switch button.active,
body.dark-mode .scale-presets button { background: #2b2134; color: #ffe8f2; }
body.dark-mode .scale-panel { background: rgba(24,18,30,.7); border-color: #49374f; }
body.dark-mode .scale-panel-heading h3,
body.dark-mode .calculator-field { color: #f8dfe9; }
body.dark-mode .scale-panel-heading p,
body.dark-mode .scale-presets > span { color: #b9a5b4; }
body.dark-mode .calculator-field input,
body.dark-mode .calculator-field select,
body.dark-mode .unit-output,
body.dark-mode .field-with-unit > span,
body.dark-mode .swap-units-btn { background: #201827; color: #ffe9f3; border-color: #594361; }
body.dark-mode .calculator-field input { -webkit-text-fill-color: #ffe9f3; caret-color: #ff9fc8; }
body.dark-mode .custom-scale-input > span { color: #e1bfd0; }
body.dark-mode .calculator-result { background: linear-gradient(135deg,#302138,#29203b); border-color: #5a4265; }
body.dark-mode .calculator-result strong { color: #ffdce9; }
body.dark-mode .calculator-result p,
body.dark-mode .result-kicker { color: #cab1bf; }
body.dark-mode .unit-equation { background: #251b2c; color: #f0d6e2; }
body.dark-mode .paper-preview { background: #fdf9fb; }
body.dark-mode .paper-result { background: #173229; border-color: #315a49; }
body.dark-mode .paper-result.does-not-fit { background: #3a2027; border-color: #70404b; }
@media (max-width:680px) {
    .scale-section-nav { grid-template-columns: 1fr; }
    .scale-section-nav button { min-height: 42px; }
    .scale-panel { padding: 17px; border-radius: 20px; }
    .scale-panel-heading { align-items: flex-start; }
    .calculator-grid,.paper-fields { grid-template-columns: 1fr; }
    .scale-mode-switch { grid-template-columns: 1fr; }
    .unit-converter-row { grid-template-columns: 1fr; }
    .swap-units-btn { margin: -2px auto; transform: rotate(90deg); }
    .swap-units-btn:hover { transform: rotate(270deg); }
    .paper-check-layout { grid-template-columns: 1fr; }
    .paper-preview-wrap { min-height: 215px; }
}

/* ========================================= */
/* ลูกเล่นที่ 3: กระดานสเก็ตช์ */
/* ========================================= */
.sketch-controls {
    display: grid; gap: 12px; margin-bottom: 15px; padding: 14px;
    background: #fff9fa; border: 1px solid #ffe4e8; border-radius: 18px;
}
.tool-row { display: flex; gap: 8px; }
.drawing-tools { overflow-x: auto; padding: 2px; scrollbar-width: none; }
.drawing-tools::-webkit-scrollbar { display: none; }
.drawing-tools .tool-btn { flex: 1 0 82px; }
.tool-btn {
    background: #fff; color: #8d6e63; border: 2px solid #ffe4e8;
    border-radius: 14px; padding: 8px 12px; min-height: 44px;
    font: 500 13px 'Prompt', sans-serif; cursor: pointer; transition: all 0.2s ease;
}
.tool-btn:hover { transform: translateY(-1px); border-color: #ffb6c1; }
.tool-btn:disabled, .size-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.tool-btn.active {
    background: linear-gradient(135deg, #ffb6c1, #fecfef); color: #5d4037;
    border-color: #ffb6c1; box-shadow: 0 4px 10px rgba(255,182,193,0.25);
}
body.dark-mode .tool-btn.active {
    background: linear-gradient(135deg, #b983ff, #ff8fbc); color: #211728;
    border-color: transparent;
}
.tool-label { flex: 0 0 42px; color: #8d6e63; font-size: 12px; font-weight: 500; }
.palette-row, .size-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.color-swatches { display: flex; gap: 6px; overflow-x: auto; padding: 3px; scrollbar-width: none; }
.color-swatches::-webkit-scrollbar { display: none; }
.color-swatch, .custom-color {
    position: relative; flex: 0 0 40px; width: 40px; height: 40px;
    border: 3px solid #fff; border-radius: 50%; background: var(--swatch);
    box-shadow: 0 0 0 1px #ead9dd; cursor: pointer; box-sizing: border-box;
}
.color-swatch.active::after {
    content: '✓'; position: absolute; inset: 0; display: grid; place-items: center;
    color: #fff; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.color-swatch:focus-visible, .custom-color:focus-within { outline: 3px solid rgba(255,154,158,.35); outline-offset: 2px; }
.custom-color {
    display: grid; place-items: center; overflow: hidden; background: conic-gradient(#ef4444,#f59e0b,#22c55e,#3b82f6,#8b5cf6,#ec4899,#ef4444);
    color: #fff; font-size: 22px; font-weight: 700;
}
.custom-color span { z-index: 1; text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; }
.custom-color input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.size-presets { display: flex; gap: 5px; }
.size-btn {
    display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
    border: 2px solid #ffe4e8; border-radius: 12px; background: #fff; cursor: pointer;
}
.size-btn i { width: var(--dot); height: var(--dot); max-width: 22px; max-height: 22px; border-radius: 50%; background: #5d4037; }
.size-btn.active { border-color: #ff9a9e; background: #fff0f3; box-shadow: 0 0 0 2px rgba(255,154,158,.12); }
.size-row input[type="range"] { flex: 1; min-width: 70px; accent-color: #ff9a9e; }
.size-row output { min-width: 24px; color: #8d6e63; font-size: 12px; text-align: center; }
.canvas-actions { display: grid; grid-template-columns: repeat(5, 1fr); }
.canvas-actions .tool-btn { min-width: 0; }
.tool-btn.danger { color: #d84b65; }
.canvas-settings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.canvas-settings label { display: grid; gap: 5px; color: #8d6e63; font-size: 11px; }
.canvas-settings select {
    width: 100%; min-height: 40px; padding: 7px 9px; border: 1px solid #ffe4e8;
    border-radius: 11px; background: #fff; color: #5d4037; font: 12px 'Prompt', sans-serif;
}
body.dark-mode .sketch-controls { background: rgba(24,18,31,.7); border-color: #4b3b59; }
body.dark-mode .tool-label, body.dark-mode .size-row output { color: #cbbbd2; }
body.dark-mode .size-btn { background: #251d2e; border-color: #554060; }
body.dark-mode .size-btn i { background: #f2ddea; }
body.dark-mode .size-btn.active { background: #382942; border-color: #c490ff; }
body.dark-mode .size-row input[type="range"] { accent-color: #c490ff; }
.canvas-viewport {
    width: 100%; overflow: auto; border: 2px dashed #ffb6c1; border-radius: 12px;
    background: #f2eaed; overscroll-behavior: contain; box-sizing: border-box;
}
.canvas-zoom-stage { position: relative; width: 100%; transform-origin: top left; }
#sketchCanvas {
    display: block;
    background: #fff;
    border: 0;
    width: 100%;
    touch-action: none; /* ห้ามเลื่อนจอตอนวาดรูป */
    cursor: crosshair;
}
#sketchCanvas.transparent-canvas {
    background-color: transparent;
    background-image: linear-gradient(45deg,#e5e0e3 25%,transparent 25%),
        linear-gradient(-45deg,#e5e0e3 25%,transparent 25%),
        linear-gradient(45deg,transparent 75%,#e5e0e3 75%),
        linear-gradient(-45deg,transparent 75%,#e5e0e3 75%);
    background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0;
}
#sketchCanvas.fill-mode { cursor: cell; }
#sketchCanvas.eraser-mode { cursor: none; }
.brush-cursor {
    position: absolute; z-index: 5; display: none; pointer-events: none;
    transform: translate(-50%,-50%); border: 2px solid #fff; border-radius: 50%;
    box-shadow: 0 0 0 1.5px #25202a, 0 1px 5px rgba(0,0,0,.35);
    background: rgba(255,255,255,.08);
}
.brush-cursor.visible { display: block; }
body.dark-mode .canvas-settings label { color: #cbbbd2; }
body.dark-mode .canvas-settings select { background: #251d2e; color: #f6eaf5; border-color: #554060; }
body.dark-mode .canvas-viewport { background: #15111b; border-color: #594466; }
body.dark-mode #sketchCanvas:not(.transparent-canvas) { background: #fff; }

@media (max-width: 520px) {
    .sketch-controls { margin-inline: -12px; padding: 12px; border-radius: 16px; }
    .tool-btn { padding-inline: 7px; font-size: 12px; }
    .palette-row { align-items: flex-start; }
    .tool-label { flex-basis: 34px; padding-top: 12px; }
    .color-swatches { padding-bottom: 7px; }
    .size-row { flex-wrap: wrap; }
    .size-row input[type="range"] { order: 2; flex-basis: calc(100% - 66px); margin-left: 42px; }
    .size-row output { order: 2; }
    .canvas-actions { display: grid; grid-template-columns: repeat(2, 1fr); }
    .canvas-settings { grid-template-columns: 1fr; }
}

/* ========================================= */
/* บันทึกภาพบน Supabase */
/* ========================================= */
.cloud-save-panel {
    margin-top: 14px; padding: 0 22px; border-radius: 20px;
    background: #fff9fa; border: 1px solid #ffe4e8;
}
.collapsible-panel { overflow: hidden; }
.panel-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    min-height: 72px; cursor: pointer; list-style: none; user-select: none;
}
.panel-summary::-webkit-details-marker { display: none; }
.panel-summary:focus-visible { outline: 2px solid #e184c2; outline-offset: 4px; border-radius: 10px; }
.summary-meta { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; color: #a1887f; font-size: 11px; }
.summary-meta i { display: inline-block; font-style: normal; font-size: 18px; transition: transform .2s ease; }
.collapsible-panel[open] .summary-meta i { transform: rotate(180deg); }
.collapsible-panel-body { padding: 0 0 20px; border-top: 1px solid #f2dce3; }
body.dark-mode .summary-meta { color: #ad9db5; }
body.dark-mode .collapsible-panel-body { border-color: #4b3b59; }
.cloud-user-row, .saved-drawings-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cloud-panel-heading h3 { margin: 0; color: #5d4037; font-size: 18px; }
.cloud-panel-heading p { margin: 3px 0 0; color: #a1887f; font-size: 12px; }
.cloud-status {
    flex: 0 0 auto; padding: 5px 10px; border-radius: 20px;
    background: #f0e8ea; color: #8d6e63; font-size: 11px; font-weight: 600;
}
.cloud-status.connected { background: #dcf8e7; color: #287a4c; }
.cloud-field { display: block; margin-bottom: 6px; color: #8d6e63; font-size: 12px; }
.cloud-inline-form { display: flex; align-items: stretch; gap: 8px; }
.cloud-inline-form input { margin-bottom: 0; min-width: 0; }
.cloud-inline-form input[type="email"] {
    width: 100%; padding: 12px 15px; border: 2px solid #ffe4e8; border-radius: 16px;
    box-sizing: border-box; background: #fff; color: #5d4037; font: 14px 'Prompt', sans-serif;
}
.cloud-inline-form .btn { width: auto; min-width: 150px; padding: 10px 16px; font-size: 13px; }
.cloud-help { margin: 8px 0 0; color: #a1887f; font-size: 11px; }
.cloud-user-row { margin-bottom: 14px; color: #7b625a; font-size: 13px; }
.text-btn {
    padding: 5px 8px; border: 0; background: transparent; color: #e76f99;
    font: 500 12px 'Prompt', sans-serif; cursor: pointer;
}
.text-btn:hover { text-decoration: underline; }
.text-btn.danger { color: #e0445e; }
.saved-drawings-header { margin-top: 20px; }
.saved-drawings-header h4 { margin: 0; font-size: 14px; color: #5d4037; }
.saved-drawings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 10px; }
.saved-drawing-card {
    min-width: 0; overflow: hidden; border-radius: 14px; background: #fff;
    border: 1px solid #ffe4e8; box-shadow: 0 4px 12px rgba(255,182,193,0.12);
}
.saved-drawing-card > img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #f6f0f2; }
.saved-drawing-info { display: flex; flex-direction: column; padding: 9px 10px 3px; min-width: 0; }
.saved-drawing-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.saved-drawing-info small { color: #a1887f; font-size: 9px; }
.saved-drawing-actions { display: flex; justify-content: space-between; padding: 2px 4px 6px; }
.saved-drawing-actions { flex-wrap: wrap; }
.drawing-placeholder { grid-column: 1/-1; text-align: center; color: #a1887f; font-size: 12px; }
.cloud-message { min-height: 18px; margin: 12px 0 0; font-size: 12px; }
.cloud-message.success { color: #28865a; }
.cloud-message.error { color: #d73755; }
.cloud-save-panel button:disabled { opacity: 0.55; cursor: wait; }

body.dark-mode .cloud-save-panel { background: rgba(24,18,31,0.7); border-color: #4b3b59; }
body.dark-mode .cloud-panel-heading h3, body.dark-mode .saved-drawings-header h4 { color: #ffe4f0; }
body.dark-mode .cloud-panel-heading p, body.dark-mode .cloud-help,
body.dark-mode .saved-drawing-info small, body.dark-mode .drawing-placeholder { color: #ad9db5; }
body.dark-mode .cloud-status { background: #372c40; color: #c8b8ce; }
body.dark-mode .cloud-status.connected { background: #203c32; color: #8ee0b7; }
body.dark-mode .cloud-inline-form input[type="email"] { background: #1d1725; color: #f6eaf5; border-color: #544060; }
body.dark-mode .cloud-user-row { color: #cbbbd2; }
body.dark-mode .saved-drawing-card { background: #211a29; border-color: #4b3b59; }
body.dark-mode .saved-drawing-card > img { background: #17131f; }
body.dark-mode .cloud-message.success { color: #83dbae; }
body.dark-mode .cloud-message.error { color: #ff92a7; }
.account-tools {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid #ffe4e8;
}
.account-tools > summary { cursor: pointer; color: #a1887f; font-size: 11px; text-align: right; }
.account-usage-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 12px; }
.account-tools span { color: #a1887f; }
.account-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
body.dark-mode .account-tools { border-color: #4b3b59; }
body.dark-mode .account-tools > summary { color: #ad9db5; }
body.dark-mode .account-tools span { color: #ad9db5; }

@media (max-width: 520px) {
    .cloud-save-panel { padding-inline: 15px; }
    .cloud-panel-heading { align-items: flex-start; }
    .panel-summary { min-height: 68px; }
    .panel-summary p { max-width: 210px; }
    .summary-meta { gap: 5px; }
    .cloud-inline-form { flex-direction: column; }
    .cloud-inline-form .btn { width: 100%; }
    .saved-drawings { grid-template-columns: 1fr; }
}

/* กล่องยืนยันที่เข้าธีมและเหมาะกับจอสัมผัส */
.app-dialog {
    width: min(92vw, 390px); max-height: 90vh; box-sizing: border-box; overflow: auto;
    padding: 26px; border: 1px solid #ffe4e8;
    border-radius: 24px; background: #fffafd; color: #5d4037;
    box-shadow: 0 24px 70px rgba(74,42,56,.3); text-align: center;
}
.app-dialog::backdrop { background: rgba(35,22,31,.58); backdrop-filter: blur(5px); }
.dialog-icon {
    display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 12px;
    border-radius: 18px; background: #fff0f3; font-size: 27px;
}
.app-dialog h3 { margin: 0 0 8px; font-size: 20px; }
.app-dialog p { margin: 0 0 22px; color: #8d6e63; font-size: 13px; line-height: 1.65; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dialog-actions .btn { min-height: 48px; padding: 10px; }
.danger-btn { background: linear-gradient(135deg,#ff6b81,#ff8fa3); color: #fff; }
body.dark-mode .app-dialog { background: #251d2e; color: #ffe4f0; border-color: #594466; }
body.dark-mode .app-dialog p { color: #c1b0c8; }
body.dark-mode .dialog-icon { background: #37283f; }
.share-dialog input {
    width: 100%; box-sizing: border-box; margin-bottom: 16px; padding: 12px;
    border: 1px solid #ffe4e8; border-radius: 12px; background: #fff; color: #5d4037;
}
.shared-view-dialog { width: min(92vw, 620px); }
.shared-view-dialog img {
    display: block; width: 100%; max-height: 65vh; margin: 12px 0 18px;
    object-fit: contain; border-radius: 14px; background: #fff;
}
.dialog-actions a.btn { display: grid; place-items: center; box-sizing: border-box; text-decoration: none; }
body.dark-mode .share-dialog input { background: #17131f; color: #f6eaf5; border-color: #594466; }
.update-toast {
    position: fixed; z-index: 2000; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
    transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
    width: max-content; max-width: calc(100vw - 28px); padding: 11px 12px 11px 16px;
    border-radius: 18px; background: #302437; color: #fff; font-size: 12px;
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.update-toast[hidden] { display: none; }
.update-toast button { border: 0; border-radius: 12px; padding: 8px 12px; background: #ff9fc3; color: #352238; font: 600 11px 'Prompt', sans-serif; cursor: pointer; }

@media (max-width: 520px) {
    .app-connectivity { top: 12px; left: 12px; }
    .dark-mode-btn { top: 12px; right: 12px; }
}