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

:root{--ocean1:#0077BE;--ocean2:#00A8E8;--ocean3:#00B4D8;--turquoise:#48CAE4;--sky:#90E0EF;--sand:#FFD60A;--deepblue:#023E8A}
*{box-sizing:border-box;font-family:'Kanit',Arial,Helvetica,sans-serif}
body{margin:0;padding:20px 0;background:linear-gradient(180deg,#CAF0F8 0%,#90E0EF 15%,#48CAE4 30%,#00B4D8 50%,#0077BE 70%,#023E8A 100%);background-size:100% 400%;background-attachment:fixed;animation:oceanWave 12s ease-in-out infinite;min-height:100vh;color:#023E8A;position:relative;overflow-x:hidden;overflow-y:auto;will-change:background-position}
body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 20%, rgba(255,214,10,0.3) 0%, transparent 40%),radial-gradient(circle at 70% 80%, rgba(0,180,216,0.4) 0%, transparent 50%),radial-gradient(circle at 50% 50%, rgba(72,202,228,0.25) 0%, transparent 60%);animation:sunShimmer 5s ease-in-out infinite;pointer-events:none;z-index:0;will-change:opacity}
/* Sun sparkle effect - แสงแดดวิ้งๆ */
body::after{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 15% 10%, rgba(255,255,255,0.9) 0%, transparent 0.8%),radial-gradient(circle at 85% 15%, rgba(255,255,255,0.7) 0%, transparent 1%),radial-gradient(circle at 25% 90%, rgba(255,255,255,0.8) 0%, transparent 0.9%),radial-gradient(circle at 65% 25%, rgba(255,214,10,0.6) 0%, transparent 1.2%),radial-gradient(circle at 50% 60%, rgba(72,202,228,0.5) 0%, transparent 1%),radial-gradient(circle at 90% 85%, rgba(255,255,255,0.8) 0%, transparent 0.7%);background-size:300% 300%;animation:sparkle 4s ease-in-out infinite;pointer-events:none;z-index:0;opacity:0.6;will-change:background-position,opacity}
@keyframes oceanWave{0%{background-position:0% 0%}50%{background-position:0% 100%}100%{background-position:0% 0%}}
@keyframes sunShimmer{0%{opacity:0.4}50%{opacity:0.9}100%{opacity:0.4}}
@keyframes sparkle{0%{background-position:0% 0%;opacity:0.4}33%{background-position:100% 100%;opacity:0.7}66%{background-position:0% 100%;opacity:0.5}100%{background-position:100% 0%;opacity:0.4}}
main{position:relative;z-index:1}
.container{width:min(920px,96%);margin:24px auto;padding:28px;background:linear-gradient(180deg,rgba(202,240,248,0.25),rgba(144,224,239,0.15));border:3px solid rgba(0,180,216,0.6);border-radius:20px;box-shadow:0 0 60px rgba(72,202,228,0.7),inset 0 0 40px rgba(255,255,255,0.35),0 15px 50px rgba(0,0,0,0.1),0 0 40px rgba(255,214,10,0.3);color:#023E8A;text-align:center;animation:containerWave 4s ease-in-out infinite;backdrop-filter:blur(10px);position:relative;will-change:transform,box-shadow}
@keyframes containerWave{0%{box-shadow:0 0 60px rgba(72,202,228,0.7),inset 0 0 40px rgba(255,255,255,0.35),0 15px 50px rgba(0,0,0,0.1),0 0 40px rgba(255,214,10,0.3);border-color:rgba(0,180,216,0.6);transform:translateY(0)}25%{box-shadow:0 0 80px rgba(0,168,232,0.9),inset 0 0 50px rgba(255,255,255,0.45),0 20px 60px rgba(0,0,0,0.15),0 0 60px rgba(255,214,10,0.5);border-color:rgba(72,202,228,0.8);transform:translateY(-3px)}50%{box-shadow:0 0 100px rgba(0,119,190,1),inset 0 0 60px rgba(255,255,255,0.5),0 25px 70px rgba(0,0,0,0.15),0 0 70px rgba(72,202,228,0.6);border-color:rgba(0,168,232,0.9);transform:translateY(0)}75%{box-shadow:0 0 80px rgba(0,180,216,0.9),inset 0 0 50px rgba(255,255,255,0.45),0 20px 60px rgba(0,0,0,0.12),0 0 60px rgba(255,214,10,0.4);border-color:rgba(72,202,228,0.7);transform:translateY(-2px)}100%{box-shadow:0 0 60px rgba(72,202,228,0.7),inset 0 0 40px rgba(255,255,255,0.35),0 15px 50px rgba(0,0,0,0.1),0 0 40px rgba(255,214,10,0.3);border-color:rgba(0,180,216,0.6);transform:translateY(0)}}
h1{margin-top:0;color:#023E8A;text-shadow:2px 2px 4px rgba(255,255,255,0.8),0 0 30px rgba(255,214,10,0.8),0 0 20px rgba(72,202,228,0.6);font-weight:700;letter-spacing:2px;animation:titleWave 3s ease-in-out infinite;will-change:transform}
@keyframes titleWave{0%{transform:scale(1);text-shadow:2px 2px 4px rgba(255,255,255,0.8),0 0 30px rgba(255,214,10,0.8),0 0 20px rgba(72,202,228,0.6)}50%{transform:scale(1.03);text-shadow:3px 3px 6px rgba(255,255,255,1),0 0 40px rgba(255,214,10,1),0 0 30px rgba(0,180,216,0.9)}100%{transform:scale(1);text-shadow:2px 2px 4px rgba(255,255,255,0.8),0 0 30px rgba(255,214,10,0.8),0 0 20px rgba(72,202,228,0.6)}}
label{display:block;margin-top:12px;font-weight:600;color:#023E8A;text-shadow:1px 1px 2px rgba(255,255,255,0.7)}
input[type=text],input[type=password],select,textarea,input[type=file]{width:100%;padding:10px;margin-top:8px;border-radius:10px;border:2px solid rgba(72,202,228,0.6);background:rgba(255,255,255,0.9);color:#023E8A;text-align:center;box-shadow:inset 0 2px 5px rgba(0,180,216,0.15),0 4px 15px rgba(72,202,228,0.3);transition:all .3s ease;backdrop-filter:blur(5px)}
input[type=text]:focus,input[type=password]:focus,select:focus,textarea:focus,input[type=file]:focus{box-shadow:inset 0 2px 8px rgba(0,180,216,0.3),0 0 25px rgba(255,214,10,0.6);background:rgba(255,255,255,0.95);border-color:#00B4D8}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2300B4D8' d='M4.5 6.5l3.5 4 3.5-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:16px;padding-right:30px}
select option{background:rgba(202,240,248,0.95);color:#023E8A;font-weight:500}
input::placeholder,textarea::placeholder{color:rgba(0,119,190,0.5)}
input[type=submit],button{background:linear-gradient(135deg,#FFD60A 0%,#48CAE4 25%,#00B4D8 50%,#48CAE4 75%,#0077BE 100%);background-size:300% 300%;border:2px solid #023E8A;padding:14px 24px;color:#fff;border-radius:12px;margin-top:14px;cursor:pointer;font-weight:700;box-shadow:0 6px 25px rgba(0,180,216,0.8),inset 0 1px 0 rgba(255,255,255,0.6),0 0 25px rgba(255,214,10,0.5);transition:all .3s cubic-bezier(.25,.46,.45,.94);animation:buttonOcean 2.5s ease-in-out infinite;text-shadow:1px 1px 3px rgba(0,0,0,0.3)}
input[type=submit]:hover,button:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 14px 40px rgba(0,119,190,1),inset 0 1px 0 rgba(255,255,255,0.8),0 0 40px rgba(255,214,10,0.9);animation:none;background-position:50% 50%}
@keyframes buttonOcean{0%{box-shadow:0 6px 25px rgba(0,180,216,0.8),inset 0 1px 0 rgba(255,255,255,0.6),0 0 25px rgba(255,214,10,0.5);background-position:0% 50%}33%{box-shadow:0 7px 30px rgba(72,202,228,1),inset 0 1px 0 rgba(255,255,255,0.7),0 0 35px rgba(255,214,10,0.7);background-position:33% 50%}66%{box-shadow:0 8px 35px rgba(0,168,232,1),inset 0 1px 0 rgba(255,255,255,0.75),0 0 40px rgba(72,202,228,0.8);background-position:66% 50%}100%{box-shadow:0 6px 25px rgba(0,180,216,0.8),inset 0 1px 0 rgba(255,255,255,0.6),0 0 25px rgba(255,214,10,0.5);background-position:100% 50%}}
.lead{background:rgba(202,240,248,0.25);padding:12px;border-radius:8px;border-left:5px solid #0077BE;color:#023E8A;font-weight:500;box-shadow:inset 0 2px 8px rgba(255,255,255,0.4);backdrop-filter:blur(5px)}
.note{font-size:0.95rem;margin-top:8px;color:#023E8A;border-left:5px solid #48CAE4;padding-left:12px;font-weight:500;text-shadow:1px 1px 2px rgba(255,255,255,0.6)}
table{width:100%;border-collapse:collapse;margin-top:16px;background:rgba(255,255,255,0.15);border-radius:8px;overflow:hidden;box-shadow:0 4px 15px rgba(0,119,190,0.2);backdrop-filter:blur(5px)}
th,td{padding:12px;border-bottom:2px solid rgba(72,202,228,0.4);text-align:center;color:#023E8A;font-weight:500}
thead th{background:linear-gradient(135deg,rgba(72,202,228,0.4),rgba(0,180,216,0.3));color:#023E8A;font-weight:700;border-bottom:3px solid #0077BE;text-shadow:1px 1px 2px rgba(255,255,255,0.6)}

/* Followers badge and summary */
.followers-row{position:relative}
.followers-badge{position:absolute;right:8px;top:8px;background:linear-gradient(135deg,#FFD60A 0%,#48CAE4 25%,#00B4D8 50%,#48CAE4 75%,#0077BE 100%);background-size:300% 300%;color:#023E8A;padding:8px 14px;border-radius:20px;font-weight:700;box-shadow:0 6px 25px rgba(0,180,216,0.9),inset 0 1px 0 rgba(255,255,255,0.7),0 0 30px rgba(255,214,10,0.6);transform:translateY(0);transition:transform .2s ease;animation:badgeOcean 2.5s ease-in-out infinite;text-shadow:1px 1px 2px rgba(255,255,255,0.5)}
@keyframes badgeOcean{0%{box-shadow:0 6px 25px rgba(0,180,216,0.9),inset 0 1px 0 rgba(255,255,255,0.7),0 0 30px rgba(255,214,10,0.6);background-position:0% 50%}33%{box-shadow:0 8px 30px rgba(72,202,228,1),inset 0 1px 0 rgba(255,255,255,0.8),0 0 40px rgba(255,214,10,0.8);background-position:33% 50%}66%{box-shadow:0 8px 35px rgba(0,168,232,1),inset 0 1px 0 rgba(255,255,255,0.85),0 0 45px rgba(72,202,228,0.9);background-position:66% 50%}100%{box-shadow:0 6px 25px rgba(0,180,216,0.9),inset 0 1px 0 rgba(255,255,255,0.7),0 0 30px rgba(255,214,10,0.6);background-position:100% 50%}}
.followers-badge span{display:inline-block;min-width:24px;text-align:center;font-weight:700}
.price-summary{margin-top:16px;padding:14px;border-radius:10px;background:rgba(202,240,248,0.2);border:2px solid rgba(72,202,228,0.5);box-shadow:inset 0 2px 8px rgba(255,255,255,0.3);backdrop-filter:blur(5px)}
.price-summary .grand{margin-top:10px;font-size:1.2rem;color:#023E8A;font-weight:700;text-shadow:2px 2px 4px rgba(255,255,255,0.7),0 0 15px rgba(255,214,10,0.5);animation:priceShine 2.5s ease-in-out infinite}
@keyframes priceShine{0%{color:#023E8A;text-shadow:2px 2px 4px rgba(255,255,255,0.7),0 0 15px rgba(255,214,10,0.5)}50%{color:#0077BE;text-shadow:2px 2px 6px rgba(255,255,255,0.9),0 0 25px rgba(255,214,10,0.9)}100%{color:#023E8A;text-shadow:2px 2px 4px rgba(255,255,255,0.7),0 0 15px rgba(255,214,10,0.5)}}

/* Android-specific optimizations (ปิด effects ที่ทำให้กระพริบเฉพาะ Android) */
body.android-device{
	animation:none !important; /* ปิด ocean wave animation */
	background:linear-gradient(180deg,#CAF0F8 0%,#90E0EF 30%,#00B4D8 60%,#0077BE 100%); /* Static gradient */
	background-attachment:scroll;
}
body.android-device::before{
	display:none !important; /* ปิดแสงแดด shimmer */
}
body.android-device::after{
	display:none !important; /* ปิด sparkles */
}
body.android-device .container{
	animation:none !important;
	backdrop-filter:none !important; /* ปิด backdrop-filter ที่ทำให้กระพริบ */
	-webkit-backdrop-filter:none !important;
	background:linear-gradient(180deg,rgba(202,240,248,0.95),rgba(144,224,239,0.9)) !important;
	box-shadow:0 0 20px rgba(72,202,228,0.4),0 5px 15px rgba(0,0,0,0.1) !important;
}
body.android-device h1{
	animation:none !important;
	transform:none !important;
}
body.android-device input[type=submit],
body.android-device button{
	animation:none !important;
	background:linear-gradient(135deg,#00B4D8 0%,#0077BE 100%) !important;
	background-size:100% 100% !important;
}
body.android-device .followers-badge{
	animation:none !important;
	background:linear-gradient(135deg,#00B4D8 0%,#0077BE 100%) !important;
	background-size:100% 100% !important;
}
body.android-device .price-summary .grand{
	animation:none !important;
}
body.android-device .price-summary,
body.android-device .lead,
body.android-device .alert{
	backdrop-filter:none !important;
	-webkit-backdrop-filter:none !important;
	background:rgba(202,240,248,0.95) !important;
}
body.android-device input[type=text],
body.android-device input[type=password],
body.android-device select,
body.android-device textarea,
body.android-device input[type=file]{
	backdrop-filter:none !important;
	-webkit-backdrop-filter:none !important;
	background:rgba(255,255,255,1) !important;
}

/* Responsive layout (ใช้สำหรับทุก mobile รวม iOS) */
@media (max-width:700px){
	.container{
		margin:12px;
		padding:16px;
		border:2px solid rgba(0,180,216,0.6);
	}
	input[type=submit],button{
		width:100%;
	}
	input[type=submit]:active,button:active{
		transform:scale(0.98);
	}
	.followers-row .followers-badge{
		right:6px;
		top:6px;
		padding:6px 10px;
	}
	table,thead,tbody,th,td,tr{display:block}
	thead{display:none}
	tbody tr{margin-bottom:12px;border-radius:8px;padding:10px;background:rgba(202,240,248,0.15);border:2px solid rgba(72,202,228,0.4);box-shadow:0 4px 12px rgba(0,119,190,0.15)}
	td{padding:8px;border:none}
}

/* Reduce motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,*::before,*::after{
		animation-duration:0.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.01ms !important;
	}
	body,body::before,body::after{
		animation:none !important;
	}
	.container,h1,input[type=submit],button,.followers-badge,.price-summary .grand{
		animation:none !important;
	}
}

/* animation on badge when count changes */
.followers-badge.animate{animation:badgePing .5s ease-out;animation-play-state:running !important}
@keyframes badgePing{0%{transform:translateY(-10px);opacity:1}100%{transform:translateY(0);opacity:1}}

/* Summer Ocean alert style */
.alert{background:rgba(202,240,248,0.25);border:2px solid rgba(72,202,228,0.6);color:#023E8A;padding:14px;border-radius:10px;margin:14px 0;font-weight:500;box-shadow:inset 0 2px 8px rgba(255,255,255,0.4);text-shadow:1px 1px 2px rgba(255,255,255,0.6);backdrop-filter:blur(5px)}