@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap";
:root{--color-primary:#2563eb;--color-primary-dark:#1e40af;--color-primary-light:#60a5fa;--color-primary-hover:#3b82f6;--color-bg-main:#f8fafc;--color-surface:#fff;--color-surface-glass:#ffffffb3;--color-text-main:#0f172a;--color-text-muted:#64748b;--color-text-inverse:#fff;--color-text-inverse-muted:#f1f5f9;--color-border:#e2e8f0;--color-success:#10b981;--color-success-bg:#d1fae5;--color-danger:#ef4444;--color-danger-bg:#fee2e2;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 12px -2px #0000000d, 0 2px 4px -2px #0000000d;--shadow-lg:0 10px 25px -3px #0000000d, 0 4px 10px -4px #0000000d;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--shadow-glass:0 4px 30px #0000000d;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--color-bg-main);max-width:100vw;color:var(--color-text-main);-webkit-font-smoothing:antialiased;-moz-text-size-adjust:100%;text-size-adjust:100%;font-family:Inter,Sarabun,sans-serif;line-height:1.5;overflow-x:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit;transition:all .2s cubic-bezier(.4,0,.2,1)}button:active{transform:scale(.97)}input,textarea{font-family:inherit}.card{background-color:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--color-border);padding:1.5rem;transition:transform .2s,box-shadow .2s}.card:hover{box-shadow:var(--shadow-lg)}.btn{border-radius:var(--radius-md);justify-content:center;align-items:center;gap:.5rem;padding:.6rem 1.25rem;font-size:.95rem;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));color:var(--color-text-inverse);box-shadow:0 4px 14px #2563eb63}.btn-glow{color:#fff;background:linear-gradient(135deg,#3b82f6,#1e40af);border:1px solid #fff3;box-shadow:0 0 15px #3b82f680,0 4px 14px #2563eb63}.btn-glow:hover{transform:translateY(-1px);box-shadow:0 0 25px #3b82f6b3,0 6px 20px #2563eb66}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #2563eb3b}.input-field{border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:#f8fafc;outline:none;width:100%;padding:.85rem 1rem;font-size:1.05rem;line-height:1.6;transition:border-color .2s,box-shadow .2s}.input-field:focus{border-color:var(--color-primary-light);background-color:var(--color-surface);box-shadow:0 0 0 3px #2563eb26}.glass-panel{background:var(--color-surface-glass);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-glass);border:1px solid #ffffff4d}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.4s cubic-bezier(.16,1,.3,1) forwards fadeIn}.responsive-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;display:grid}.responsive-grid-wide{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.25rem;display:grid}.logo-icon-container{width:42px;height:42px}.logo-icon{width:20px;height:20px}.logo-title{font-size:1.15rem}.logo-subtitle{font-size:.75rem}@media (max-width:640px){.responsive-grid,.responsive-grid-wide{grid-template-columns:repeat(auto-fill,minmax(100%,1fr))}.logo-icon-container{width:32px;height:32px;border-radius:8px!important}.logo-icon{width:16px!important;height:16px!important}.logo-title{font-size:.95rem}.logo-subtitle{font-size:.65rem}.subject-bracket-left,.subject-bracket-right{display:none}.user-email-role-line{flex-wrap:wrap}}.user-list-item{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.user-info-container{flex-grow:1;width:auto}.user-actions-container{align-items:center;gap:.5rem;width:auto;padding-top:0;display:flex}@media (max-width:640px){.user-list-item{flex-direction:column;gap:.75rem}.user-info-container{width:100%}.user-actions-container{justify-content:space-between;width:100%;padding-top:.25rem}}@keyframes progress-pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes progress-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.upload-progress-bar{background-color:var(--color-border);border-radius:3px;height:6px;position:relative;overflow:hidden}.upload-progress-fill{background:linear-gradient(135deg, var(--color-primary), var(--color-primary-light));border-radius:3px;height:100%;transition:width .3s}.upload-progress-fill.active{background:linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary) 100%);background-size:200% 100%;animation:1.5s ease-in-out infinite progress-shimmer}.upload-progress-fill.done{background:var(--color-success);transition:width .3s,background .3s}.upload-progress-fill.error{background:var(--color-danger);transition:width .3s,background .3s}.upload-file-list{scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;max-height:320px;overflow-y:auto}.upload-file-list::-webkit-scrollbar{width:4px}.upload-file-list::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:2px}@keyframes checkmark-pop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.upload-status-icon{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:.7rem;display:inline-flex}.upload-status-icon.done{background-color:var(--color-success-bg);color:var(--color-success);animation:.3s forwards checkmark-pop}.upload-status-icon.uploading{color:var(--color-primary);background-color:#2563eb1a;animation:1.5s ease-in-out infinite progress-pulse}.upload-status-icon.pending{color:var(--color-text-muted);background-color:#f1f5f9}.upload-status-icon.error{background-color:var(--color-danger-bg);color:var(--color-danger)}