@import"https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap";#root{width:100%;min-height:100vh}:root{--primary: #2563EB;--primary-dark: #1D4ED8;--primary-deeper: #1E40AF;--primary-light: rgba(37, 99, 235, .08);--primary-50: rgba(37, 99, 235, .05);--accent: #60A5FA;--accent-light: rgba(96, 165, 250, .12);--accent-vivid: #818CF8;--gray-50: #F8FAFC;--gray-100: #F1F5F9;--gray-200: #E2E8F0;--gray-300: #CBD5E1;--gray-400: #94A3B8;--gray-500: #64748B;--gray-600: #475569;--gray-700: #334155;--gray-800: #1E293B;--gray-900: #0F172A;--status-present: #10B981;--status-late: #F59E0B;--status-absent: #EF4444;--status-leave: #3B82F6;--status-holiday: #8B5CF6;--status-pending: #F59E0B;--status-approved: #10B981;--status-rejected: #EF4444;--status-cancelled: #64748B;--bg-page: #F0F4FF;--bg-card: #ffffff;--bg-card-hover: #F8FAFF;--bg-header: rgba(255, 255, 255, .82);--bg-input: #ffffff;--bg-white: #ffffff;--bg-primary: #F0F4FF;--bg-nav: rgba(255, 255, 255, .82);--text-primary: #0F172A;--text-secondary: #475569;--text-tertiary: #94A3B8;--text-muted: #CBD5E1;--text-white: #ffffff;--text-on-primary: #ffffff;--border-color: rgba(37, 99, 235, .08);--border-light: rgba(37, 99, 235, .04);--divider: rgba(37, 99, 235, .06);--line-green: var(--primary);--line-green-dark: var(--primary-dark);--line-green-light: var(--primary-light);--shadow-card: var(--shadow-sm);--shadow-elevated: var(--shadow-md);--badge-pending-bg: #FFF8E1;--badge-pending-text: #B45309;--badge-approved-bg: #ECFDF5;--badge-approved-text: #065F46;--badge-rejected-bg: #FEF2F2;--badge-rejected-text: #991B1B;--badge-cancelled-bg: #F1F5F9;--badge-cancelled-text: #64748B;--badge-type-bg: #EFF6FF;--badge-type-text: #1E40AF;--danger: #EF4444;--danger-dark: #DC2626;--danger-bg: #FEF2F2;--danger-text: #991B1B;--info-bg: #EFF6FF;--info-text: #1E40AF;--warning-bg: #FFFBEB;--warning-text: #B45309;--status-present-bg: #ECFDF5;--status-present-text: #065F46;--status-late-bg: #FFFBEB;--status-late-text: #92400E;--status-absent-bg: #FEF2F2;--status-absent-text: #991B1B;--status-leave-bg: #EFF6FF;--status-leave-text: #1E40AF;--status-holiday-bg: #F5F3FF;--status-holiday-text: #5B21B6;--bg-neutral: #F1F5F9;--success: #10B981;--shadow-xs: 0 1px 2px rgba(37, 99, 235, .05);--shadow-sm: 0 1px 3px rgba(37, 99, 235, .07), 0 1px 2px rgba(0, 0, 0, .02);--shadow-md: 0 4px 16px rgba(37, 99, 235, .09), 0 2px 4px rgba(0, 0, 0, .02);--shadow-lg: 0 12px 32px rgba(37, 99, 235, .12), 0 4px 8px rgba(0, 0, 0, .03);--hero-gradient: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 40%, #E0E7FF 100%);--primary-gradient: linear-gradient(135deg, #3B82F6 0%, #2563EB 50%, #1D4ED8 100%);--primary-gradient-vivid: linear-gradient(135deg, #60A5FA 0%, #3B82F6 40%, #2563EB 100%);--not-checked-in-gradient: linear-gradient(135deg, #94A3B8 0%, #64748B 100%);--card-gradient: linear-gradient(180deg, rgba(37, 99, 235, .015) 0%, rgba(255, 255, 255, 0) 100%);--page-gradient: linear-gradient(180deg, #E8EEFF 0%, #F0F4FF 30%, #F8FAFF 100%);--shimmer-gradient: linear-gradient(90deg, var(--border-light) 25%, rgba(37, 99, 235, .06) 50%, var(--border-light) 75%);--deco-line: rgba(37, 99, 235, .06);--deco-line-strong: rgba(37, 99, 235, .1);--deco-glow: rgba(37, 99, 235, .04);--deco-circle: rgba(37, 99, 235, .05);--radius-sm: 12px;--radius-md: 16px;--radius-lg: 20px;--radius-xl: 24px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .4s cubic-bezier(.4, 0, .2, 1);--header-height: 60px;--bottom-nav-height: 64px;--safe-area-bottom: env(safe-area-inset-bottom, 0px)}[data-theme=dark]{--primary: #60A5FA;--primary-dark: #3B82F6;--primary-deeper: #2563EB;--primary-light: rgba(96, 165, 250, .12);--primary-50: rgba(96, 165, 250, .06);--accent: #818CF8;--accent-vivid: #A78BFA;--gray-50: #0B1120;--gray-100: #131D33;--gray-200: #1E2D45;--gray-300: #334155;--gray-400: #94A3B8;--gray-500: #CBD5E1;--gray-600: #E2E8F0;--gray-700: #F1F5F9;--gray-800: #F8FAFC;--gray-900: #ffffff;--bg-page: #080E1E;--bg-card: rgba(19, 29, 51, .8);--bg-card-hover: #1E2D45;--bg-header: rgba(8, 14, 30, .85);--bg-input: #131D33;--bg-white: #131D33;--bg-primary: #080E1E;--bg-nav: rgba(8, 14, 30, .85);--text-primary: #F1F5F9;--text-secondary: #CBD5E1;--text-tertiary: #94A3B8;--text-muted: #64748B;--text-on-primary: #ffffff;--border-color: rgba(96, 165, 250, .1);--border-light: rgba(96, 165, 250, .05);--divider: rgba(96, 165, 250, .06);--badge-pending-bg: rgba(245, 158, 11, .15);--badge-pending-text: #FBBF24;--badge-approved-bg: rgba(16, 185, 129, .15);--badge-approved-text: #34D399;--badge-rejected-bg: rgba(239, 68, 68, .15);--badge-rejected-text: #F87171;--badge-cancelled-bg: rgba(100, 116, 139, .15);--badge-cancelled-text: #94A3B8;--badge-type-bg: rgba(96, 165, 250, .15);--badge-type-text: #60A5FA;--danger-bg: rgba(239, 68, 68, .12);--danger-text: #F87171;--info-bg: rgba(96, 165, 250, .12);--info-text: #60A5FA;--warning-bg: rgba(245, 158, 11, .12);--warning-text: #FBBF24;--status-present-bg: rgba(16, 185, 129, .12);--status-present-text: #34D399;--status-late-bg: rgba(245, 158, 11, .12);--status-late-text: #FBBF24;--status-absent-bg: rgba(239, 68, 68, .12);--status-absent-text: #F87171;--status-leave-bg: rgba(96, 165, 250, .12);--status-leave-text: #60A5FA;--status-holiday-bg: rgba(139, 92, 246, .12);--status-holiday-text: #A78BFA;--bg-neutral: rgba(148, 163, 184, .08);--success: #34D399;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3), 0 0 1px rgba(96, 165, 250, .1);--shadow-md: 0 4px 16px rgba(0, 0, 0, .35), 0 0 2px rgba(96, 165, 250, .08);--shadow-lg: 0 12px 32px rgba(0, 0, 0, .4), 0 0 4px rgba(96, 165, 250, .06);--hero-gradient: linear-gradient(135deg, #0F1729 0%, #131D33 50%, #0F1729 100%);--primary-gradient: linear-gradient(135deg, #60A5FA 0%, #3B82F6 50%, #2563EB 100%);--primary-gradient-vivid: linear-gradient(135deg, #818CF8 0%, #60A5FA 50%, #3B82F6 100%);--not-checked-in-gradient: linear-gradient(135deg, #334155 0%, #1E293B 100%);--card-gradient: linear-gradient(180deg, rgba(96, 165, 250, .03) 0%, rgba(0, 0, 0, 0) 100%);--page-gradient: linear-gradient(180deg, #0B1225 0%, #080E1E 30%, #060A17 100%);--shimmer-gradient: linear-gradient(90deg, rgba(96, 165, 250, .05) 25%, rgba(96, 165, 250, .1) 50%, rgba(96, 165, 250, .05) 75%);--deco-line: rgba(96, 165, 250, .06);--deco-line-strong: rgba(96, 165, 250, .12);--deco-glow: rgba(96, 165, 250, .05);--deco-circle: rgba(96, 165, 250, .06)}*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:0;background:var(--page-gradient);background-attachment:fixed;color:var(--text-primary);font-family:Noto Sans Thai,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:block;min-height:100vh;min-width:0}.deco-pattern-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.deco-pattern-bg svg{width:100%;height:100%}.app-shell{display:flex;flex-direction:column;min-height:100vh;width:100%;position:relative;z-index:1}.app-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 16px;background-color:var(--bg-header);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);color:var(--text-primary);border-bottom:1px solid var(--border-color)}.app-header__title{font-size:18px;font-weight:700;margin:0;letter-spacing:.5px}.app-header__user{font-size:13px;font-weight:400;color:var(--gray-600);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-content{flex:1;padding:16px;padding-bottom:calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 16px);overflow-y:auto;-webkit-overflow-scrolling:touch}.bottom-nav{position:fixed;bottom:0;left:0;right:0;width:100%;height:calc(var(--bottom-nav-height) + var(--safe-area-bottom));padding-bottom:var(--safe-area-bottom);background-color:var(--bg-nav);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-top:1px solid var(--border-color);display:flex;align-items:stretch;z-index:100}.bottom-nav__item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--gray-400);font-size:11px;font-weight:500;transition:color var(--transition-fast);cursor:pointer;touch-action:manipulation;border:none;background:none;padding:0;position:relative;min-height:44px;min-width:44px}.bottom-nav__item--active{color:var(--primary)}.bottom-nav__icon{font-size:22px;line-height:1}.bottom-nav__label{line-height:1}.card{background-color:var(--bg-card);background-image:var(--card-gradient);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:16px;margin-bottom:12px;border:1px solid var(--border-color);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.card__title{font-size:14px;font-weight:600;color:var(--gray-600);margin:0 0 12px}.attendance-card{background:var(--primary-gradient);color:var(--text-white);border-radius:var(--radius-xl);padding:20px;margin-bottom:16px;position:relative;overflow:hidden}.attendance-card:before{content:"";position:absolute;top:-30%;right:-20%;width:200px;height:200px;border-radius:50%;background:#ffffff0f}.attendance-card:after{content:"";position:absolute;bottom:-40%;left:-10%;width:160px;height:160px;border-radius:50%;background:#ffffff0a}.attendance-card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;position:relative;z-index:1}.attendance-card__date{font-size:13px;opacity:.85}.attendance-card__status-badge{font-size:12px;padding:4px 10px;border-radius:var(--radius-full);background-color:#fff3;font-weight:500}.attendance-card__times{display:flex;gap:24px;margin-bottom:16px;position:relative;z-index:1}.attendance-card__time-block{display:flex;flex-direction:column;gap:2px}.attendance-card__time-label{font-size:11px;opacity:.75}.attendance-card__time-value{font-size:20px;font-weight:700}.attendance-card__late{font-size:12px;opacity:.85;margin-bottom:12px}.attendance-card__checkout-btn{width:100%;padding:10px;border:2px solid rgba(255,255,255,.7);border-radius:var(--radius-full);background-color:#ffffff26;color:var(--text-white);font-size:14px;font-weight:600;cursor:pointer;touch-action:manipulation;transition:background-color var(--transition-fast);min-height:44px;position:relative;z-index:1}.attendance-card__checkout-btn:active{background-color:#ffffff4d}.attendance-card--not-checked-in{background:var(--not-checked-in-gradient)}.quick-actions{margin-bottom:16px}.quick-actions__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quick-actions__item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;background-color:var(--bg-card);background-image:var(--card-gradient);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);text-decoration:none;color:var(--gray-900);font-size:12px;font-weight:500;text-align:center;transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast);cursor:pointer;touch-action:manipulation;min-height:44px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.quick-actions__item:active{transform:scale(.96);box-shadow:var(--shadow-md);border-color:var(--primary)}.quick-actions__icon{font-size:28px;line-height:1}.leave-balance-summary{margin-bottom:16px}.leave-balance-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border-color)}.leave-balance-item:last-child{border-bottom:none}.leave-balance-item__info{flex:1;margin-right:12px}.leave-balance-item__name{font-size:14px;font-weight:500;margin-bottom:6px}.leave-balance-item__bar{width:100%;height:6px;background-color:var(--gray-100);border-radius:3px;overflow:hidden}.leave-balance-item__bar-fill{height:100%;background:var(--primary-gradient);border-radius:3px;transition:width var(--transition-slow)}.leave-balance-item__days{font-size:13px;font-weight:600;color:var(--gray-600);white-space:nowrap}.announcements-list{margin-bottom:16px}.announcement-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-color);cursor:pointer;touch-action:manipulation}.announcement-item:last-child{border-bottom:none}.announcement-item__unread{width:8px;height:8px;min-width:8px;border-radius:50%;background-color:var(--primary);margin-top:6px}.announcement-item__unread--read{background-color:transparent}.announcement-item__content{flex:1;min-width:0}.announcement-item__title{font-size:14px;font-weight:500;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.announcement-item__date{font-size:12px;color:var(--gray-400)}.badge{display:inline-block;padding:3px 8px;border-radius:var(--radius-full);font-size:11px;font-weight:600;line-height:1.2;white-space:nowrap}.badge--pending{background-color:var(--badge-pending-bg);color:var(--badge-pending-text)}.badge--approved{background-color:var(--badge-approved-bg);color:var(--badge-approved-text)}.badge--rejected{background-color:var(--badge-rejected-bg);color:var(--badge-rejected-text)}.badge--cancelled{background-color:var(--badge-cancelled-bg);color:var(--badge-cancelled-text)}.badge--type{background-color:var(--badge-type-bg);color:var(--badge-type-text)}.request-item{display:flex;align-items:flex-start;gap:12px;padding:14px;background-color:var(--bg-card);background-image:var(--card-gradient);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);margin-bottom:8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.request-item__icon{font-size:24px;line-height:1;min-width:28px;text-align:center}.request-item__body{flex:1;min-width:0}.request-item__header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}.request-item__type{font-size:13px;font-weight:600}.request-item__summary{font-size:13px;color:var(--gray-600);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.request-item__date{font-size:11px;color:var(--gray-400)}.request-filters{display:flex;gap:8px;margin-bottom:12px}.request-filters__select{flex:1;padding:8px 12px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background-color:var(--bg-white);font-size:13px;color:var(--gray-900);appearance:auto;cursor:pointer;touch-action:manipulation;min-height:44px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.request-filters__select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-light)}.profile{text-align:center}.profile__avatar{width:80px;height:80px;border-radius:50%;margin:8px auto 12px;object-fit:cover;border:3px solid var(--primary);box-shadow:0 0 0 4px var(--primary-light),0 4px 16px #2563eb33}.profile__name{font-size:20px;font-weight:700;margin:0 0 4px}.profile__code{font-size:14px;color:var(--gray-400);margin:0 0 16px}.profile__info{text-align:left}.profile__info-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border-color);font-size:14px}.profile__info-row:last-child{border-bottom:none}.profile__info-label{color:var(--gray-600)}.profile__info-value{font-weight:500;text-align:right;max-width:60%;word-break:break-word}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border:none;border-radius:var(--radius-full);font-size:14px;font-weight:600;cursor:pointer;touch-action:manipulation;transition:all var(--transition-fast);text-decoration:none;min-height:44px}.btn:active{transform:scale(.98)}.btn--primary{background:var(--primary-gradient);color:var(--text-white);box-shadow:0 4px 14px #2563eb4d}.btn--primary:hover{box-shadow:0 6px 20px #2563eb66}.btn--danger{background-color:var(--danger);color:var(--text-white)}.btn--danger:hover{background-color:var(--danger-dark)}.btn--block{width:100%}.btn--outline{background-color:transparent;border:1.5px solid var(--border-color);color:var(--gray-900);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.text-center{text-align:center}.loading-spinner{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--gray-400);font-size:14px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 16px;color:var(--gray-400);text-align:center}.empty-state__icon{font-size:48px;margin-bottom:12px;line-height:1}.empty-state__text{font-size:14px}.section-title{font-size:15px;font-weight:600;color:var(--gray-900);margin:0 0 10px}.bottom-nav__badge{position:absolute;top:4px;right:calc(50% - 18px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--primary-gradient);color:var(--text-white);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}button,a,[role=button],[role=tab],[role=link],input[type=submit],input[type=button],input[type=reset],summary{cursor:pointer;touch-action:manipulation}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 #2563eb00}50%{box-shadow:0 0 12px 4px #2563eb26}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}body,.app-shell,.app-header,.bottom-nav,.card,.quick-actions__item,.request-item{transition:background-color var(--transition-normal),color var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal)}@media(max-width:359px){.app-content{padding:12px;padding-bottom:calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 12px)}.quick-actions__grid{gap:6px}.quick-actions__item{padding:10px 4px;font-size:11px}.attendance-card{padding:16px}.attendance-card__time-value{font-size:18px}}@media(min-width:768px){.app-content{max-width:640px;margin:0 auto;padding:20px 24px;padding-bottom:calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 20px)}.quick-actions__grid{grid-template-columns:repeat(3,1fr);gap:12px}}@media(min-width:1024px){.app-content{max-width:720px}.bottom-nav{max-width:720px;left:50%;transform:translate(-50%);border-radius:var(--radius-lg) var(--radius-lg) 0 0}}[data-liff=true]{--safe-area-bottom: 0px}[data-liff=true] .bottom-nav{padding-bottom:0;border-bottom:none}[data-liff=true] .app-content{padding-bottom:calc(var(--bottom-nav-height) + 12px)}