:root{--padding-bottom-normal:34px;--padding-landscape:21px 44px;--bg-light:#f8f9fa;--bg-dark:#181818;--text-light:#333;--text-dark:#ddd;--accent-light:#007aff;--accent-dark:#0a84ff;--font-family:"Inter",sans-serif;--font-family-th:"Noto Sans Thai",sans-serif}body{font-family:var(--font-family);background-color:var(--bg-light);color:var(--text-light);margin:0;padding-bottom:var(--padding-bottom-normal);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .3s ease-in-out}:lang(th){font-family:var(--font-family-th),var(--font-family)}@media (orientation:landscape){body{padding:var(--padding-landscape)}}.dark-mode{background-color:var(--bg-dark);color:var(--text-dark)}.dark-mode .button{background-color:var(--accent-dark)}.header{position:fixed;top:0;right:0;padding:10px;display:flex;align-items:center;gap:10px}.profile-icon{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 2px 6px rgba(0,0,0,.2)}.logout-button{background:none;border:none;cursor:pointer}.logout-icon{width:24px;height:24px;color:#ff3b30;transition:opacity .3s ease-in-out}.logout-button:hover .logout-icon{opacity:.7}.container{max-width:960px;width:90%;padding:20px;background:#ffffff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08);transition:background .3s ease-in-out}.dark-mode .container{background:#242424}h1,h2,h3{font-weight:600;color:var(--text-light);transition:color .3s ease-in-out}.dark-mode h1,.dark-mode h2,.dark-mode h3{color:var(--text-dark)}.button{background-color:var(--accent-light);color:#fff;border:none;padding:12px 20px;border-radius:6px;cursor:pointer;transition:background-color .3s ease,transform .2s ease-in-out}.button:hover{background-color:#005bb5;transform:scale(1.05)}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px;width:100%;padding:10px}.gallery-item{overflow:hidden;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:box-shadow .3s ease-in-out}.gallery-item img{display:block;width:100%;height:auto;transition:transform .3s ease-in-out}.gallery-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.15)}.gallery-item img:hover{transform:scale(1.05)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.container,.gallery-item{animation:fadeIn .5s ease-in-out}.switch{position:relative;display:inline-block;width:50px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;border-radius:34px}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:white;border-radius:50%}input:checked+.slider{background-color:#0a84ff}input:checked+.slider:before{transform:translateX(26px)}