:root{--blue:#2563eb;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-soft:#eff6ff;--accent-grad:linear-gradient(135deg,#2563eb,#4f7cff);--ink:#0f172a;--ink-2:#334155;--muted:#64748b;--line:#e6eaf0;--line-2:#eef1f6;--bg:#f5f7fb;--card:#ffffff;--green:#059669;--amber:#d97706;--red:#dc2626;--shadow-sm:0 1px 2px rgba(15,23,42,.05);--shadow-md:0 4px 16px -4px rgba(15,23,42,.10),0 2px 6px -2px rgba(15,23,42,.06);--shadow-lg:0 12px 32px -8px rgba(15,23,42,.16);--radius:16px;--radius-sm:10px;--sidebar-w:256px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Noto Sans Thai,IBM Plex Sans Thai,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5}a{color:inherit;text-decoration:none}::selection{background:rgba(37,99,235,.15)}.shell{display:flex;height:100dvh;overflow:hidden}.sidebar{width:var(--sidebar-w);background:#0b1220;background-image:radial-gradient(120% 80% at 0 0,#16223c 0,#0b1220 55%);color:#94a3b8;padding:22px 16px;flex:none;position:-webkit-sticky;position:sticky;top:0;height:100dvh;overflow-y:auto;border-right:1px solid rgba(255,255,255,.04)}.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:18px;color:#fff;margin:2px 8px 8px;letter-spacing:-.01em}.brand .logo{height:44px;width:auto;border-radius:11px;background:#fff;padding:4px 8px;display:block;box-shadow:0 6px 16px -4px rgba(37,99,235,.6)}.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:#4b5975;font-weight:700;margin:18px 12px 8px}.nav{flex-direction:column}.nav,.nav a{display:flex}.nav a{position:relative;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:#a9b4c6;margin-bottom:2px;transition:background .15s ease,color .15s ease}.nav a .ico{width:18px;height:18px;flex:none;opacity:.8}.nav a:hover{background:rgba(255,255,255,.06);color:#fff}.nav a:hover .ico{opacity:1}.nav a.active{background:var(--accent-grad);color:#fff;font-weight:600;box-shadow:0 8px 18px -8px rgba(37,99,235,.8)}.nav a.active .ico{opacity:1}.sidebar-foot{margin:20px 8px 4px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06);font-size:11.5px;color:#5b688a;line-height:1.6}.main{flex:1 1;min-width:0;max-width:1600px;margin:0 auto;padding:34px clamp(28px,4vw,60px);height:100dvh;overflow-y:auto;display:flex;flex-direction:column}.page-title{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:0 0 5px}.page-sub{color:var(--muted);font-size:14px;margin:0 0 26px}.page-head{display:flex;align-items:center;gap:15px;margin-bottom:26px}.page-head-ico{--c:var(--blue);width:48px;height:48px;flex:none;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 55%,#fff));box-shadow:0 10px 20px -8px color-mix(in srgb,var(--c) 70%,transparent)}.page-head-ico svg{width:24px;height:24px}.page-head .page-title{margin:0}.page-head .page-sub{margin:3px 0 0}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:20px;box-shadow:var(--shadow-sm)}.card h2{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0 0 16px;display:flex;align-items:center;gap:10px}.card h2:before{content:"";width:4px;height:16px;flex:none;border-radius:3px;background:var(--accent-grad)}.grid{display:grid;grid-gap:16px;gap:16px}.stats{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}.stat{--c:var(--blue);position:relative;overflow:hidden;padding:18px 20px 20px;transition:transform .16s ease,box-shadow .18s ease,border-color .16s ease}.stat:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--c);opacity:.85}.stat-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 13%,#fff);color:var(--c);margin-bottom:14px}.stat-ico svg{width:22px;height:22px}a.stat:hover{transform:translateY(-3px);box-shadow:0 16px 30px -14px color-mix(in srgb,var(--c) 55%,transparent);border-color:color-mix(in srgb,var(--c) 35%,var(--line))}.stat .n{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}.stat .l{color:var(--muted);font-size:13px;margin-top:3px;font-weight:500}.hero{position:relative;overflow:hidden;border-radius:var(--radius);padding:28px 30px;margin-bottom:24px;color:#fff;background:linear-gradient(120deg,#172554,#1d4ed8 52%,#3b82f6);box-shadow:0 18px 40px -22px rgba(29,78,216,.75)}.hero:after{content:"";position:absolute;top:-70px;right:-40px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);pointer-events:none}.hero h1{margin:0 0 6px;font-size:25px;font-weight:700;letter-spacing:-.02em}.hero h1,.hero p{position:relative;z-index:1}.hero p{margin:0;color:rgba(255,255,255,.85);font-size:14px}.hero .date{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;margin-top:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:6px 13px;border-radius:999px;font-size:13px;font-weight:500}.hero .date svg{width:15px;height:15px}.table-wrap{overflow-x:auto;border-radius:var(--radius-sm)}table{width:100%;border-collapse:collapse;font-size:14px}thead th{position:-webkit-sticky;position:sticky;top:0;background:#f8fafc}td,th{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap}tbody tr{transition:background .12s ease}tbody tr:hover{background:#f9fbfe}tr:last-child td{border-bottom:none}.input,.select,textarea.input{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease}.input::placeholder,textarea.input::placeholder{color:#94a3b8}.input:focus,.select:focus,textarea.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:34px}textarea.input{min-height:72px;resize:vertical}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field label{font-size:12.5px;font-weight:600;color:var(--ink-2)}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}.row .field{flex:1 1;min-width:140px;margin-bottom:0}.btn{border:1px solid var(--line);cursor:pointer;border-radius:var(--radius-sm);padding:9px 16px;font-size:14px;font-weight:600;font-family:inherit;background:#fff;color:var(--ink);transition:background .15s ease,box-shadow .15s ease,transform .05s ease,border-color .15s ease;white-space:nowrap}.btn:hover{background:#f1f5f9;border-color:#d7deea}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.25)}.btn-primary{background:var(--accent-grad);color:#fff;border-color:transparent;box-shadow:0 6px 16px -6px rgba(37,99,235,.55)}.btn-primary:hover{background:linear-gradient(135deg,#1d4ed8,#3d6bff);border-color:transparent}.btn-danger{background:#fef2f2;color:var(--red);border-color:#fde0e0}.btn-danger:hover{background:#fee2e2;border-color:#fbcaca}.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:8px}.badge{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--blue-soft);color:var(--blue);white-space:nowrap;border:1px solid rgba(37,99,235,.12)}.badge-green{background:#ecfdf5;color:var(--green);border-color:rgba(5,150,105,.14)}.badge-amber{background:#fffbeb;color:var(--amber);border-color:rgba(217,119,6,.14)}.badge-gray{background:#f1f5f9;color:var(--muted);border-color:rgba(100,116,139,.14)}.badge-violet{background:#f5f3ff;color:#7c3aed;border-color:rgba(124,58,237,.16)}.muted{color:var(--muted)}.actions{display:flex;flex-wrap:wrap}.actions,.inline{gap:8px;align-items:center}.inline{display:inline-flex}button:disabled{opacity:.6;cursor:default}.card-add{background:linear-gradient(180deg,#f8fbff,#ffffff 60%);border-color:#cfdcf3}.card-add>h2:before{background:linear-gradient(135deg,#16a34a,#22c55e)}.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.toolbar .search{position:relative;flex:1 1;min-width:220px;max-width:380px}.toolbar .search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}.toolbar .search .input{padding-left:36px}.toast-host{position:fixed;top:20px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:10px;pointer-events:none}.toast{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:12px;padding:12px 16px;box-shadow:var(--shadow-lg);font-size:14px;font-weight:500;color:var(--ink);min-width:250px;max-width:360px;animation:toastIn .22s ease}.toast-success{border-left-color:var(--green)}.toast-error{border-left-color:var(--red)}.toast-ico{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;line-height:1}.toast-success .toast-ico{background:var(--green)}.toast-error .toast-ico{background:var(--red)}@keyframes toastIn{0%{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}@media (max-width:860px){.sidebar{position:static;width:100%;height:auto;padding:16px}.shell{flex-direction:column;height:auto;overflow:visible}.sidebar .nav{flex-flow:row wrap}.nav a{margin-bottom:0}.nav-label,.sidebar-foot{display:none}.main{padding:22px 18px;height:auto;overflow:visible;display:block}}.le-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}.le-title{font-size:16px;font-weight:700}.le-dirty{margin-left:8px;font-size:12px;color:var(--amber);font-weight:600}.le-actions{margin-left:auto;display:flex;gap:8px}.le-error{background:#fef2f2;color:var(--red);border:1px solid #fecaca;border-radius:8px;padding:8px 12px;font-size:13px;margin-bottom:12px}.le-list{flex-direction:column}.le-list,.le-row{display:flex;gap:10px}.le-row{align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;background:#fbfcfe}.le-handle{cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:#94a3b8;font-size:20px;line-height:1;padding:6px 4px;flex:none}.le-handle:active{cursor:-webkit-grabbing;cursor:grabbing}.le-fields{flex:1 1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-gap:12px;gap:12px;min-width:0;align-items:start}.le-field{display:flex;flex-direction:column;gap:4px;min-width:0}.le-label{font-size:11px;font-weight:600;color:#94a3b8}.le-img{display:flex;align-items:center;gap:12px}.le-img-preview{width:96px;height:56px;flex:none;border:1px dashed var(--line);border-radius:10px;background:#fff;display:grid;place-items:center;overflow:hidden}.le-img-preview img{max-width:100%;max-height:100%;object-fit:contain}.le-img-empty{font-size:10.5px;color:#94a3b8;text-align:center;padding:0 6px;line-height:1.3}.le-img-actions{display:flex;gap:8px;flex-wrap:wrap}.le-upload{cursor:pointer}.le-upload input[type=file]{display:none}.le-row-controls{display:flex;flex-direction:column;gap:4px;flex:none}.le-ctl{width:28px;height:24px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;font-size:11px;color:var(--muted);display:grid;place-items:center}.le-ctl:disabled{opacity:.4;cursor:not-allowed}.le-del{color:var(--red);border-color:#fecaca}.le-chips{display:flex;flex-wrap:wrap;gap:6px}.le-chip{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:5px 11px;font-size:12.5px;cursor:pointer;font-family:inherit}.le-chip.on{background:var(--blue);color:#fff;border-color:var(--blue)}.le-check{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2)}.le-form{display:flex;flex-direction:column}.le-form .field span{font-size:12.5px;font-weight:600;color:#475569}.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);display:grid;place-items:center;padding:20px;z-index:100}.modal{width:560px;max-width:100%;max-height:calc(100dvh - 60px);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}.modal-head h3{margin:0;font-size:17px}.modal-x{border:none;background:#f1f5f9;width:32px;height:32px;border-radius:9px;cursor:pointer;color:var(--muted);font-size:14px}.modal-body{padding:18px 20px;overflow-y:auto}.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line)}.inbox{display:grid;grid-template-columns:280px 1fr 320px;grid-gap:16px;gap:16px;flex:1 1 auto;min-height:0}.inbox-list{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow-y:auto}.convo{display:block;width:100%;text-align:left;border:none;border-bottom:1px solid var(--line);background:none;cursor:pointer;padding:12px 14px;font-family:inherit}.convo:hover{background:#f8fafc}.convo.active{background:var(--blue-soft)}.convo-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}.convo-name{font-weight:700;font-size:14px;color:var(--ink)}.convo-snip{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.convo-time{font-size:11px;color:#94a3b8;margin-top:3px}.inbox-thread{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;min-height:0}.thread-empty{display:grid;place-items:center;height:100%;padding:40px}.thread-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}.thread-name{font-weight:700;font-size:15px}.thread-sub{font-size:12.5px}.inbox-back{display:none;border:1px solid var(--line);background:#fff;width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:16px}.thread-body{flex:1 1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}.bubble{max-width:78%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.55;box-shadow:var(--shadow-sm)}.bubble.customer{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}.bubble.agent{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px}.bubble-time{display:block;font-size:10.5px;opacity:.6;margin-top:4px}.thread-composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}.inbox-data{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;overflow-y:auto}.data-card h3{margin:0 0 14px;font-size:15px}.data-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:6px 0}.data-row span{color:var(--muted)}.data-card hr{border:none;border-top:1px solid var(--line);margin:10px 0}.inbox-pager{justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);position:-webkit-sticky;position:sticky;top:0;background:var(--card);z-index:1}.inbox-pager,.pager{display:flex;align-items:center}.pager{justify-content:center;gap:14px;margin:18px 0}.pager-info{font-size:12.5px}.pager-disabled{opacity:.4;pointer-events:none}@media (max-width:1200px){.inbox{grid-template-columns:260px 1fr;flex:none;height:auto}.inbox-list{max-height:60vh}.inbox-thread{min-height:62vh}.inbox-data{grid-column:1/-1}}@media (max-width:860px){.inbox{grid-template-columns:1fr;flex:none}.inbox[data-view=list] .inbox-data,.inbox[data-view=list] .inbox-thread,.inbox[data-view=thread] .inbox-list{display:none}.inbox-back{display:grid;place-items:center}.le-fields>.le-field{grid-column:1/-1!important}}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(60% 50% at 80% -10%,rgba(37,99,235,.14),transparent 70%),var(--bg,#f1f5f9)}.login-card{width:100%;max-width:380px;padding:32px 30px 28px}.login-logo{height:52px;width:auto;display:block;margin:0 auto 20px;border-radius:12px}.login-card h2{justify-content:center;margin-bottom:20px}.login-submit{width:100%;justify-content:center;margin-top:6px}.logout-btn{width:calc(100% - 16px);margin:14px 8px 0;padding:9px 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.05);color:#cbd5e1;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}.logout-btn:hover{background:rgba(239,68,68,.15);color:#fca5a5;border-color:rgba(239,68,68,.3)}