/* Import Material Symbols */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* Base Body Styling */
body {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: 'itim', cursive;
    min-height: 200vh; /* Forces a scrollbar for testing */
    /* Firefox Version */
    /*scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-primary) var(--md-sys-color-secondary);
    */
}

/* Customize the scrollbar track (the background) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* The draggable part (the thumb) */
::-webkit-scrollbar-thumb {
    background-color: var(--md-sys-color-primary);
    border-radius: 12px;
}

/* The thumb on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--md-sys-color-secondary);
}

/* The track background */
::-webkit-scrollbar-track {
    background-color: var(--md-sys-color-surface);
}

.main-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 24px;
    gap: 24px;
    align-items: center;
}

/* --- Banner --- */
.banner-wrapper {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline);
    box-shadow: 0 0 20px rgb(from var(--md-sys-color-outline-variant) r g b / 0.2);
}
.banner-img { width: 100%; height: auto; display: block; }

/* --- Header Info --- */
.header-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding: 0 10px;
}
.header-left { flex: 1; text-align: left; }
.header-right { flex: 1; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }

.header_title {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgb(from var(--md-sys-color-primary-fixed-variant) r g b / 0.3);
}

.text-head { color: var(--md-sys-color-primary); }

/* --- About Info --- */
.about-section h3 {
    font-size: 1rem; color: var(--text-secondary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;
}
.about-section p {
    font-size: 1.1rem; line-height: 1.6; color: var(--text-secondary); max-width: 500px;
}
.text-normal { color: var(--md-sys-color-on-tertiary-container); }
.box-normal {
    background-color: var(--md-sys-color-tertiary);
    border-radius: 12px;
    padding: 16px;
}

/* --- Language EN/TH --- */
.lang {
    background: none;
    border: none;
    color: var(--md-sys-color-primary);
    font-family: 'Itim', cursive;
    font-size: 1rem;
    text-decoration: underline;
    margin-top: 10px;
}

/* --- Theme Controls --- */
.controls {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background-color: var(--md-sys-color-surface-container);
    border-radius: 28px; /* M3 extra rounded style */
    width: fit-content;
}

.interactive-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.switch-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.divider {
    width: 100%;
    height: 24px;
    background-color: var(--md-sys-color-outline-variant);
}

md-icon {
    font-family: 'Material Symbols Outlined';
    color: var(--md-sys-color-primary);
}

form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.card-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    font-size: 3rem;
    color: var(--md-sys-color-primary);
}
.custom-img-icon {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 11px;
    vertical-align: middle;
}

/* --- Footer --- */
.site-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--md-sys-color-outline);
    text-align: center;
    color: var(--md-sys-color-on-primary-container);
    font-size: 0.9rem;
    opacity: 0.7;
}

/* --- Light Mode --- */
[data-theme="light"][data-contrast="sc"] {
  --md-sys-color-primary: rgb(27 107 81);
  --md-sys-color-surface-tint: rgb(27 107 81);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(166 242 209);
  --md-sys-color-on-primary-container: rgb(0 81 59);
  --md-sys-color-secondary: rgb(76 99 89);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(206 233 219);
  --md-sys-color-on-secondary-container: rgb(53 75 65);
  --md-sys-color-tertiary: rgb(62 99 116);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(194 232 253);
  --md-sys-color-on-tertiary-container: rgb(38 75 92);
  --md-sys-color-error: rgb(186 26 26);
  --md-sys-color-on-error: rgb(255 255 255);
  --md-sys-color-error-container: rgb(255 218 214);
  --md-sys-color-on-error-container: rgb(147 0 10);
  --md-sys-color-background: rgb(245 251 245);
  --md-sys-color-on-background: rgb(23 29 26);
  --md-sys-color-surface: rgb(245 251 245);
  --md-sys-color-on-surface: rgb(23 29 26);
  --md-sys-color-surface-variant: rgb(219 229 222);
  --md-sys-color-on-surface-variant: rgb(64 73 68);
  --md-sys-color-outline: rgb(112 121 116);
  --md-sys-color-outline-variant: rgb(191 201 194);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(44 50 46);
  --md-sys-color-inverse-on-surface: rgb(236 242 237);
  --md-sys-color-inverse-primary: rgb(139 214 182);
  --md-sys-color-primary-fixed: rgb(166 242 209);
  --md-sys-color-on-primary-fixed: rgb(0 33 22);
  --md-sys-color-primary-fixed-dim: rgb(139 214 182);
  --md-sys-color-on-primary-fixed-variant: rgb(0 81 59);
  --md-sys-color-secondary-fixed: rgb(206 233 219);
  --md-sys-color-on-secondary-fixed: rgb(9 32 23);
  --md-sys-color-secondary-fixed-dim: rgb(179 204 191);
  --md-sys-color-on-secondary-fixed-variant: rgb(53 75 65);
  --md-sys-color-tertiary-fixed: rgb(194 232 253);
  --md-sys-color-on-tertiary-fixed: rgb(0 31 42);
  --md-sys-color-tertiary-fixed-dim: rgb(166 204 224);
  --md-sys-color-on-tertiary-fixed-variant: rgb(38 75 92);
  --md-sys-color-surface-dim: rgb(214 219 214);
  --md-sys-color-surface-bright: rgb(245 251 245);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(239 245 240);
  --md-sys-color-surface-container: rgb(233 239 234);
  --md-sys-color-surface-container-high: rgb(228 234 228);
  --md-sys-color-surface-container-highest: rgb(222 228 223);
}
[data-theme="light"][data-contrast="mc"] {
  --md-sys-color-primary: rgb(0 63 45);
  --md-sys-color-surface-tint: rgb(27 107 81);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(46 122 95);
  --md-sys-color-on-primary-container: rgb(255 255 255);
  --md-sys-color-secondary: rgb(36 59 49);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(91 114 103);
  --md-sys-color-on-secondary-container: rgb(255 255 255);
  --md-sys-color-tertiary: rgb(18 58 74);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(77 114 132);
  --md-sys-color-on-tertiary-container: rgb(255 255 255);
  --md-sys-color-error: rgb(116 0 6);
  --md-sys-color-on-error: rgb(255 255 255);
  --md-sys-color-error-container: rgb(207 44 39);
  --md-sys-color-on-error-container: rgb(255 255 255);
  --md-sys-color-background: rgb(245 251 245);
  --md-sys-color-on-background: rgb(23 29 26);
  --md-sys-color-surface: rgb(245 251 245);
  --md-sys-color-on-surface: rgb(13 18 16);
  --md-sys-color-surface-variant: rgb(219 229 222);
  --md-sys-color-on-surface-variant: rgb(47 56 52);
  --md-sys-color-outline: rgb(75 85 79);
  --md-sys-color-outline-variant: rgb(102 111 106);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(44 50 46);
  --md-sys-color-inverse-on-surface: rgb(236 242 237);
  --md-sys-color-inverse-primary: rgb(139 214 182);
  --md-sys-color-primary-fixed: rgb(46 122 95);
  --md-sys-color-on-primary-fixed: rgb(255 255 255);
  --md-sys-color-primary-fixed-dim: rgb(9 97 72);
  --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
  --md-sys-color-secondary-fixed: rgb(91 114 103);
  --md-sys-color-on-secondary-fixed: rgb(255 255 255);
  --md-sys-color-secondary-fixed-dim: rgb(67 90 79);
  --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
  --md-sys-color-tertiary-fixed: rgb(77 114 132);
  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
  --md-sys-color-tertiary-fixed-dim: rgb(53 89 106);
  --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
  --md-sys-color-surface-dim: rgb(194 200 195);
  --md-sys-color-surface-bright: rgb(245 251 245);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(239 245 240);
  --md-sys-color-surface-container: rgb(228 234 228);
  --md-sys-color-surface-container-high: rgb(216 222 217);
  --md-sys-color-surface-container-highest: rgb(205 211 206);
}
[data-theme="light"][data-contrast="hc"] {
  --md-sys-color-primary: rgb(0 51 36);
  --md-sys-color-surface-tint: rgb(27 107 81);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(0 84 61);
  --md-sys-color-on-primary-container: rgb(255 255 255);
  --md-sys-color-secondary: rgb(26 48 39);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(55 78 68);
  --md-sys-color-on-secondary-container: rgb(255 255 255);
  --md-sys-color-tertiary: rgb(3 48 64);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(40 78 94);
  --md-sys-color-on-tertiary-container: rgb(255 255 255);
  --md-sys-color-error: rgb(96 0 4);
  --md-sys-color-on-error: rgb(255 255 255);
  --md-sys-color-error-container: rgb(152 0 10);
  --md-sys-color-on-error-container: rgb(255 255 255);
  --md-sys-color-background: rgb(245 251 245);
  --md-sys-color-on-background: rgb(23 29 26);
  --md-sys-color-surface: rgb(245 251 245);
  --md-sys-color-on-surface: rgb(0 0 0);
  --md-sys-color-surface-variant: rgb(219 229 222);
  --md-sys-color-on-surface-variant: rgb(0 0 0);
  --md-sys-color-outline: rgb(37 46 42);
  --md-sys-color-outline-variant: rgb(66 75 70);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(44 50 46);
  --md-sys-color-inverse-on-surface: rgb(255 255 255);
  --md-sys-color-inverse-primary: rgb(139 214 182);
  --md-sys-color-primary-fixed: rgb(0 84 61);
  --md-sys-color-on-primary-fixed: rgb(255 255 255);
  --md-sys-color-primary-fixed-dim: rgb(0 59 42);
  --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
  --md-sys-color-secondary-fixed: rgb(55 78 68);
  --md-sys-color-on-secondary-fixed: rgb(255 255 255);
  --md-sys-color-secondary-fixed-dim: rgb(33 55 46);
  --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
  --md-sys-color-tertiary-fixed: rgb(40 78 94);
  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
  --md-sys-color-tertiary-fixed-dim: rgb(13 55 71);
  --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
  --md-sys-color-surface-dim: rgb(180 186 181);
  --md-sys-color-surface-bright: rgb(245 251 245);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(236 242 237);
  --md-sys-color-surface-container: rgb(222 228 223);
  --md-sys-color-surface-container-high: rgb(208 214 209);
  --md-sys-color-surface-container-highest: rgb(194 200 195);
}

/* --- Dark Mode --- */
[data-theme="dark"][data-contrast="sc"] {
  --md-sys-color-primary: rgb(139 214 182);
  --md-sys-color-surface-tint: rgb(139 214 182);
  --md-sys-color-on-primary: rgb(0 56 40);
  --md-sys-color-primary-container: rgb(0 81 59);
  --md-sys-color-on-primary-container: rgb(166 242 209);
  --md-sys-color-secondary: rgb(179 204 191);
  --md-sys-color-on-secondary: rgb(30 53 43);
  --md-sys-color-secondary-container: rgb(53 75 65);
  --md-sys-color-on-secondary-container: rgb(206 233 219);
  --md-sys-color-tertiary: rgb(166 204 224);
  --md-sys-color-on-tertiary: rgb(9 53 68);
  --md-sys-color-tertiary-container: rgb(38 75 92);
  --md-sys-color-on-tertiary-container: rgb(194 232 253);
  --md-sys-color-error: rgb(255 180 171);
  --md-sys-color-on-error: rgb(105 0 5);
  --md-sys-color-error-container: rgb(147 0 10);
  --md-sys-color-on-error-container: rgb(255 218 214);
  --md-sys-color-background: rgb(15 21 18);
  --md-sys-color-on-background: rgb(222 228 223);
  --md-sys-color-surface: rgb(15 21 18);
  --md-sys-color-on-surface: rgb(222 228 223);
  --md-sys-color-surface-variant: rgb(64 73 68);
  --md-sys-color-on-surface-variant: rgb(191 201 194);
  --md-sys-color-outline: rgb(137 147 141);
  --md-sys-color-outline-variant: rgb(64 73 68);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(222 228 223);
  --md-sys-color-inverse-on-surface: rgb(44 50 46);
  --md-sys-color-inverse-primary: rgb(27 107 81);
  --md-sys-color-primary-fixed: rgb(166 242 209);
  --md-sys-color-on-primary-fixed: rgb(0 33 22);
  --md-sys-color-primary-fixed-dim: rgb(139 214 182);
  --md-sys-color-on-primary-fixed-variant: rgb(0 81 59);
  --md-sys-color-secondary-fixed: rgb(206 233 219);
  --md-sys-color-on-secondary-fixed: rgb(9 32 23);
  --md-sys-color-secondary-fixed-dim: rgb(179 204 191);
  --md-sys-color-on-secondary-fixed-variant: rgb(53 75 65);
  --md-sys-color-tertiary-fixed: rgb(194 232 253);
  --md-sys-color-on-tertiary-fixed: rgb(0 31 42);
  --md-sys-color-tertiary-fixed-dim: rgb(166 204 224);
  --md-sys-color-on-tertiary-fixed-variant: rgb(38 75 92);
  --md-sys-color-surface-dim: rgb(15 21 18);
  --md-sys-color-surface-bright: rgb(52 59 55);
  --md-sys-color-surface-container-lowest: rgb(10 15 13);
  --md-sys-color-surface-container-low: rgb(23 29 26);
  --md-sys-color-surface-container: rgb(27 33 30);
  --md-sys-color-surface-container-high: rgb(37 43 40);
  --md-sys-color-surface-container-highest: rgb(48 54 51);
}
[data-theme="dark"][data-contrast="mc"] {
  --md-sys-color-primary: rgb(160 236 203);
  --md-sys-color-surface-tint: rgb(139 214 182);
  --md-sys-color-on-primary: rgb(0 44 31);
  --md-sys-color-primary-container: rgb(85 158 130);
  --md-sys-color-on-primary-container: rgb(0 0 0);
  --md-sys-color-secondary: rgb(200 226 213);
  --md-sys-color-on-secondary: rgb(19 42 33);
  --md-sys-color-secondary-container: rgb(126 150 138);
  --md-sys-color-on-secondary-container: rgb(0 0 0);
  --md-sys-color-tertiary: rgb(188 226 246);
  --md-sys-color-on-tertiary: rgb(0 41 56);
  --md-sys-color-tertiary-container: rgb(113 150 169);
  --md-sys-color-on-tertiary-container: rgb(0 0 0);
  --md-sys-color-error: rgb(255 210 204);
  --md-sys-color-on-error: rgb(84 0 3);
  --md-sys-color-error-container: rgb(255 84 73);
  --md-sys-color-on-error-container: rgb(0 0 0);
  --md-sys-color-background: rgb(15 21 18);
  --md-sys-color-on-background: rgb(222 228 223);
  --md-sys-color-surface: rgb(15 21 18);
  --md-sys-color-on-surface: rgb(255 255 255);
  --md-sys-color-surface-variant: rgb(64 73 68);
  --md-sys-color-on-surface-variant: rgb(213 223 216);
  --md-sys-color-outline: rgb(171 180 174);
  --md-sys-color-outline-variant: rgb(137 147 141);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(222 228 223);
  --md-sys-color-inverse-on-surface: rgb(37 43 40);
  --md-sys-color-inverse-primary: rgb(0 83 60);
  --md-sys-color-primary-fixed: rgb(166 242 209);
  --md-sys-color-on-primary-fixed: rgb(0 21 13);
  --md-sys-color-primary-fixed-dim: rgb(139 214 182);
  --md-sys-color-on-primary-fixed-variant: rgb(0 63 45);
  --md-sys-color-secondary-fixed: rgb(206 233 219);
  --md-sys-color-on-secondary-fixed: rgb(1 21 13);
  --md-sys-color-secondary-fixed-dim: rgb(179 204 191);
  --md-sys-color-on-secondary-fixed-variant: rgb(36 59 49);
  --md-sys-color-tertiary-fixed: rgb(194 232 253);
  --md-sys-color-on-tertiary-fixed: rgb(0 19 28);
  --md-sys-color-tertiary-fixed-dim: rgb(166 204 224);
  --md-sys-color-on-tertiary-fixed-variant: rgb(18 58 74);
  --md-sys-color-surface-dim: rgb(15 21 18);
  --md-sys-color-surface-bright: rgb(64 70 66);
  --md-sys-color-surface-container-lowest: rgb(4 8 6);
  --md-sys-color-surface-container-low: rgb(25 31 28);
  --md-sys-color-surface-container: rgb(35 41 38);
  --md-sys-color-surface-container-high: rgb(46 52 49);
  --md-sys-color-surface-container-highest: rgb(57 63 60);
}
[data-theme="dark"][data-contrast="hc"] {
  --md-sys-color-primary: rgb(183 255 223);
  --md-sys-color-surface-tint: rgb(139 214 182);
  --md-sys-color-on-primary: rgb(0 0 0);
  --md-sys-color-primary-container: rgb(135 210 178);
  --md-sys-color-on-primary-container: rgb(0 14 8);
  --md-sys-color-secondary: rgb(220 246 232);
  --md-sys-color-on-secondary: rgb(0 0 0);
  --md-sys-color-secondary-container: rgb(175 200 187);
  --md-sys-color-on-secondary-container: rgb(0 14 8);
  --md-sys-color-tertiary: rgb(223 243 255);
  --md-sys-color-on-tertiary: rgb(0 0 0);
  --md-sys-color-tertiary-container: rgb(162 200 220);
  --md-sys-color-on-tertiary-container: rgb(0 13 20);
  --md-sys-color-error: rgb(255 236 233);
  --md-sys-color-on-error: rgb(0 0 0);
  --md-sys-color-error-container: rgb(255 174 164);
  --md-sys-color-on-error-container: rgb(34 0 1);
  --md-sys-color-background: rgb(15 21 18);
  --md-sys-color-on-background: rgb(222 228 223);
  --md-sys-color-surface: rgb(15 21 18);
  --md-sys-color-on-surface: rgb(255 255 255);
  --md-sys-color-surface-variant: rgb(64 73 68);
  --md-sys-color-on-surface-variant: rgb(255 255 255);
  --md-sys-color-outline: rgb(233 242 235);
  --md-sys-color-outline-variant: rgb(187 197 190);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(222 228 223);
  --md-sys-color-inverse-on-surface: rgb(0 0 0);
  --md-sys-color-inverse-primary: rgb(0 83 60);
  --md-sys-color-primary-fixed: rgb(166 242 209);
  --md-sys-color-on-primary-fixed: rgb(0 0 0);
  --md-sys-color-primary-fixed-dim: rgb(139 214 182);
  --md-sys-color-on-primary-fixed-variant: rgb(0 21 13);
  --md-sys-color-secondary-fixed: rgb(206 233 219);
  --md-sys-color-on-secondary-fixed: rgb(0 0 0);
  --md-sys-color-secondary-fixed-dim: rgb(179 204 191);
  --md-sys-color-on-secondary-fixed-variant: rgb(1 21 13);
  --md-sys-color-tertiary-fixed: rgb(194 232 253);
  --md-sys-color-on-tertiary-fixed: rgb(0 0 0);
  --md-sys-color-tertiary-fixed-dim: rgb(166 204 224);
  --md-sys-color-on-tertiary-fixed-variant: rgb(0 19 28);
  --md-sys-color-surface-dim: rgb(15 21 18);
  --md-sys-color-surface-bright: rgb(75 81 78);
  --md-sys-color-surface-container-lowest: rgb(0 0 0);
  --md-sys-color-surface-container-low: rgb(27 33 30);
  --md-sys-color-surface-container: rgb(44 50 46);
  --md-sys-color-surface-container-high: rgb(55 61 57);
  --md-sys-color-surface-container-highest: rgb(66 72 69);
}