:root{--navy: #2b3f58;--navy-dark: #1f2e41;--navy-soft: #3a5272;--blue: #84a7d8;--blue-light: #b3d5f1;--blue-100: #e1eef9;--blue-50: #f0f7fc;--sand: #f0ede6;--ink: #262223;--slate: #556579;--line: #d9e1ea;--white: #fff;--late: #b4402f;--late-bg: #fbeceA;--today: #a8681a;--today-bg: #fdf3e2;--cold: #3e6fa8;--cold-bg: #e8f0fa;--ok: #3c8d5a;--ok-bg: #e7f4ec;--radius: 12px;--shadow: 0 1px 2px rgba(43, 63, 88, .06), 0 2px 8px rgba(43, 63, 88, .05);--font: "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font);color:var(--ink);background:var(--blue-50);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}h1,h2,h3{margin:0;line-height:1.25;color:var(--navy)}h1{font-size:1.5rem;font-weight:700}h2{font-size:1.1rem;font-weight:600}h3{font-size:1rem;font-weight:600}p{margin:.25rem 0}a{color:inherit}.link{color:var(--navy-soft);text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:2px}.muted{color:var(--slate)}.small{font-size:.85rem}.pre{white-space:pre-wrap}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tone-late{color:var(--late)}.tone-today{color:var(--today)}.tone-cold{color:var(--cold)}svg{vertical-align:-2px;flex-shrink:0}input,select,textarea{font:inherit;color:var(--ink);width:100%;padding:.6rem .75rem;border:1px solid var(--line);border-radius:10px;background:var(--white);min-height:44px}textarea{resize:vertical;min-height:0}input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}input[type=checkbox]{width:20px;height:20px;min-height:0;accent-color:var(--navy)}.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}.field>input+input,.field>.chips+input,.field>input+datalist+input{margin-top:.4rem}.field-label{font-weight:600;font-size:.9rem;color:var(--navy)}.field-hint{font-weight:400;color:var(--slate)}.check{display:flex;align-items:center;gap:.5rem;margin:.25rem 0 .75rem;cursor:pointer}.row-2{display:grid;grid-template-columns:1fr 1fr;gap:0 .9rem}.inline-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.inline-row input{width:auto}.form-error{color:var(--late);background:var(--late-bg);padding:.5rem .75rem;border-radius:8px;margin:0 0 .75rem}.form-info{color:var(--ok);background:var(--ok-bg);padding:.5rem .75rem;border-radius:8px}.btn{font:inherit;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem 1rem;min-height:42px;border-radius:10px;border:1px solid var(--line);background:var(--white);color:var(--navy);cursor:pointer;text-decoration:none;white-space:nowrap}.btn:hover{border-color:var(--blue);background:var(--blue-50)}.btn:disabled{opacity:.6;cursor:default}.btn-primary{background:var(--navy);border-color:var(--navy);color:var(--white)}.btn-primary:hover{background:var(--navy-dark);border-color:var(--navy-dark)}.btn-ghost{background:transparent;border-color:transparent}.btn-sm{padding:.35rem .7rem;min-height:36px;font-size:.85rem;border-radius:8px}.btn-lg{min-height:50px;font-size:1.05rem}.btn-block{width:100%}.btn-row{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.danger{color:var(--late)}.link-btn{font:inherit;background:none;border:none;color:var(--navy-soft);text-decoration:underline;text-decoration-color:var(--blue);cursor:pointer;padding:.25rem}.icon-btn{background:none;border:none;color:var(--slate);cursor:pointer;padding:.4rem;border-radius:8px;display:inline-flex}.icon-btn:hover{background:var(--blue-50)}.chips{display:flex;flex-wrap:wrap;gap:.4rem}.chip{font:inherit;font-size:.9rem;display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .85rem;min-height:38px;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--ink);cursor:pointer}.chip:hover{border-color:var(--blue)}.chip-on,.chip-on:hover{background:var(--navy);border-color:var(--navy);color:var(--white)}.chip-count{font-size:.75rem;background:var(--blue-100);color:var(--navy);border-radius:999px;padding:0 .45rem;margin-left:.2rem}.chip-on .chip-count{background:var(--navy-soft);color:var(--white)}.badge{display:inline-block;font-size:.75rem;font-weight:600;padding:.1rem .55rem;border-radius:999px;white-space:nowrap}.badge-customer{background:var(--ok-bg);color:var(--ok)}.badge-prospect{background:var(--blue-100);color:var(--navy-soft)}.badge-inactive{background:var(--sand);color:var(--slate)}.badge-main{background:var(--navy);color:var(--white)}.tag{display:inline-block;background:var(--blue-100);color:var(--navy);border-radius:6px;padding:0 .45rem;font-weight:600}.shell{min-height:100vh;padding-bottom:96px}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.5rem;padding:.5rem 1.25rem;background:var(--navy);color:var(--white)}.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--white)}.brand-logo{background:var(--white);border-radius:10px;padding:3px 6px;display:flex}.brand-text{font-weight:700;letter-spacing:.08em;color:var(--blue-light)}.topnav{display:flex;gap:.25rem}.topnav-link{color:var(--blue-light);text-decoration:none;padding:.5rem .9rem;border-radius:8px;font-weight:500}.topnav-link:hover,.topnav-link.active{background:var(--navy-soft);color:var(--white)}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:.6rem}.lang-btn{font:inherit;font-size:.85rem;font-weight:600;background:transparent;color:var(--blue-light);border:1px solid var(--navy-soft);border-radius:8px;padding:.3rem .6rem;cursor:pointer}.lang-btn-light{color:var(--slate);border-color:var(--line);margin-top:.75rem}.user-menu{position:relative}.avatar{font:inherit;width:38px;height:38px;border-radius:50%;border:none;background:var(--blue);color:var(--navy-dark);font-weight:700;cursor:pointer}.menu{position:absolute;right:0;top:46px;min-width:220px;background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px #2b3f582e;padding:.4rem;z-index:30}.menu-head{display:flex;flex-direction:column;padding:.5rem .6rem;border-bottom:1px solid var(--line);margin-bottom:.3rem}.menu button{font:inherit;display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;background:none;border:none;padding:.55rem .6rem;border-radius:8px;cursor:pointer;color:var(--ink)}.menu button:hover{background:var(--blue-50)}.main{max-width:1040px;margin:0 auto;padding:1.25rem}.fab{position:fixed;right:1.25rem;bottom:1.25rem;z-index:25;font:inherit;font-weight:700;font-size:1rem;display:inline-flex;align-items:center;gap:.4rem;padding:.85rem 1.3rem;border-radius:999px;border:none;background:var(--navy);color:var(--white);box-shadow:0 6px 18px #1f2e4159;cursor:pointer}.fab:hover{background:var(--navy-dark)}.bottomnav{display:none}.page{display:flex;flex-direction:column;gap:1rem}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}section{display:flex;flex-direction:column;gap:.6rem}.section-title{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}.section-title .count{font-size:.8rem;background:currentColor;border-radius:999px;padding:0 .5rem}.section-title .count{color:var(--white);background:var(--slate)}.section-title.tone-late .count{background:var(--late)}.section-title.tone-today .count{background:var(--today)}.section-title.tone-cold .count{background:var(--cold)}.section-hint{margin-top:-.4rem}.section-actions{display:flex;justify-content:flex-end}.sub-title{margin-top:1rem;color:var(--slate)}.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:.9rem 1rem}.empty{text-align:center;color:var(--slate);padding:1.5rem 1rem;border:1px dashed var(--line);border-radius:var(--radius);background:var(--white)}.empty.big{padding:2.5rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.75rem}.spinner{width:32px;height:32px;margin:3rem auto;border:3px solid var(--blue-100);border-top-color:var(--navy);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.back-link{display:inline-flex;align-items:center;gap:.3rem;color:var(--slate);text-decoration:none;font-size:.9rem;width:fit-content}.back-link:hover{color:var(--navy)}.notice{background:var(--today-bg);border:1px solid #efd6a8;border-radius:10px;padding:.6rem .9rem;margin-bottom:.9rem}.notice ul{margin:.3rem 0 0;padding-left:1.1rem}.task{display:flex;gap:1rem;justify-content:space-between;align-items:center;border-left:4px solid var(--line)}.task-late{border-left-color:var(--late)}.task-today{border-left-color:var(--today)}.task-cold{border-left-color:var(--cold)}.task-soon{border-left-color:var(--blue)}.task-main{display:flex;flex-direction:column;min-width:0}.task-title{font-weight:700;font-size:1.05rem;color:var(--navy);text-decoration:none}.task-title:hover{text-decoration:underline}.task-person{color:var(--ink)}.task-note{color:var(--slate);font-size:.9rem}.task-meta{display:flex;flex-wrap:wrap;gap:.25rem .8rem;align-items:center;margin-top:.2rem}.due{font-size:.8rem;font-weight:700;border-radius:6px;padding:.05rem .5rem}.due-late{color:var(--late);background:var(--late-bg)}.due-today{color:var(--today);background:var(--today-bg)}.due-cold{color:var(--cold);background:var(--cold-bg)}.due-soon{color:var(--navy-soft);background:var(--blue-100)}.task-actions{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end;flex-shrink:0}.kind-inline{display:inline-flex;align-items:center;gap:.25rem}.search-box{display:flex;align-items:center;gap:.5rem;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:0 .75rem;color:var(--slate)}.search-box input{border:none;padding-left:0}.search-box input:focus{outline:none}.search-box:focus-within{outline:2px solid var(--blue)}.search-box.big{min-height:50px;font-size:1.05rem}.filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;align-items:center}.filter-selects{display:flex;gap:.5rem}.filter-selects select{width:auto;min-height:38px;padding:.35rem .6rem}.company-row{display:flex;gap:.8rem;align-items:center;text-decoration:none;color:inherit}.company-row:hover{border-color:var(--blue)}.heat{width:10px;height:10px;border-radius:50%;flex-shrink:0}.heat-ok{background:var(--ok)}.heat-warm{background:#d69e2e}.heat-cold{background:var(--late)}.company-row-main{flex:1;min-width:0}.company-row-title{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.company-row-title strong{font-size:1.02rem;color:var(--navy)}.company-row-meta{display:flex;flex-wrap:wrap;gap:0 .9rem}.company-row-side{text-align:right;flex-shrink:0}.company-head{display:grid;grid-template-columns:1fr auto;gap:.75rem 1rem}.company-head-title{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.company-head-meta{display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin-top:.3rem}.company-head-actions{display:flex;gap:.5rem;align-items:flex-start}.stat-strip{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;border-top:1px solid var(--line);padding-top:.75rem}.stat-strip>div{display:flex;flex-direction:column}.stat-strip strong{display:inline-flex;align-items:center;gap:.3rem}.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--line);overflow-x:auto}.tab{font:inherit;font-weight:600;background:none;border:none;border-bottom:3px solid transparent;padding:.6rem .9rem;color:var(--slate);cursor:pointer;white-space:nowrap}.tab-on{color:var(--navy);border-bottom-color:var(--navy)}.followups ul{list-style:none;margin:.5rem 0 0;padding:0}.followups li{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.45rem 0;border-top:1px solid var(--line)}.timeline{list-style:none;margin:0;padding:0;position:relative}.timeline:before{content:"";position:absolute;left:17px;top:8px;bottom:8px;width:2px;background:var(--line)}.tl-item{display:flex;gap:.8rem;padding:.5rem 0;position:relative}.tl-icon{width:36px;height:36px;border-radius:50%;background:var(--white);border:2px solid var(--blue-light);color:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1}.tl-order .tl-icon{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}.tl-quote .tl-icon,.tl-sample .tl-icon{background:var(--blue-100);border-color:var(--blue)}.tl-note .tl-icon{background:var(--sand);border-color:#ddd5c4;color:var(--slate)}.tl-body{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:.6rem .85rem;flex:1;min-width:0}.tl-head{display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline}.tl-head strong{color:var(--navy)}.amount{margin-left:auto;font-weight:700;color:var(--ok)}.grid-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:.75rem}.person,.site{display:flex;flex-direction:column;gap:.45rem}.person-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}.person-name{font-size:1.05rem;color:var(--navy)}.person-tags,.person-contact{display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:center}.person-contact span,.person-contact a{display:inline-flex;align-items:center;gap:.3rem}.person .btn-row,.site .btn-row{justify-content:flex-start;margin-top:auto}.person-left{flex-direction:row;justify-content:space-between;align-items:center;opacity:.75}.details dl{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.25rem;margin:0 0 1rem}.details dt{color:var(--slate)}.details dd{margin:0}.team-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}.team-pending{border-left:4px solid var(--today)}.team-actions{display:flex;gap:.5rem;align-items:center}.team-actions select{width:auto;min-height:36px;padding:.3rem .5rem}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#1f2e4173;display:flex;align-items:center;justify-content:center;padding:1rem}.modal{background:var(--white);border-radius:16px;width:100%;max-width:540px;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 20px 50px #1f2e414d}.modal-wide{max-width:720px}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem .5rem}.modal-body{padding:.5rem 1.25rem;overflow-y:auto}.modal-foot{padding:.75rem 1.25rem 1rem;border-top:1px solid var(--line)}.log-company{display:flex;align-items:center;gap:.6rem;background:var(--blue-50);border-radius:10px;padding:.6rem .8rem;margin-bottom:.9rem}.log-company strong{color:var(--navy);font-size:1.05rem}.log-company .link-btn{margin-left:auto}.kind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}.kind-btn{font:inherit;font-size:.85rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.65rem .25rem;border-radius:10px;border:1px solid var(--line);background:var(--white);color:var(--navy);cursor:pointer;min-height:64px}.kind-btn:hover{border-color:var(--blue);background:var(--blue-50)}.kind-on,.kind-on:hover{background:var(--navy);border-color:var(--navy);color:var(--white)}.picker-list{list-style:none;margin:.4rem 0 0;padding:0;border:1px solid var(--line);border-radius:10px;max-height:260px;overflow-y:auto}.picker-list li+li{border-top:1px solid var(--line)}.picker-list button{font:inherit;width:100%;text-align:left;background:none;border:none;padding:.65rem .8rem;cursor:pointer;color:var(--ink)}.picker-list button:hover{background:var(--blue-50)}.picker-list strong{color:var(--navy)}.pad{padding:.65rem .8rem}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:linear-gradient(180deg,var(--navy) 0,var(--navy) 38%,var(--blue-50) 38%)}.auth-card{width:100%;max-width:420px;background:var(--white);border-radius:18px;padding:2rem 1.75rem 1.5rem;box-shadow:0 16px 40px #1f2e4133;display:flex;flex-direction:column;gap:.4rem}.auth-card h1{text-align:center}.auth-card>p{text-align:center;margin-bottom:1rem}.auth-logo{margin:0 auto .5rem}.auth-links{display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:.5rem;font-size:.9rem}.auth-card .btn+.btn{margin-top:.4rem}.toasts{position:fixed;left:50%;bottom:96px;transform:translate(-50%);z-index:60;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}.toast{background:var(--navy-dark);color:var(--white);padding:.6rem 1.1rem;border-radius:999px;box-shadow:0 6px 18px #1f2e414d;font-weight:600;white-space:nowrap}.toast-error{background:var(--late);white-space:normal;border-radius:12px}@media (max-width: 720px){body{font-size:16px}.topbar{padding:.5rem .9rem}.topnav{display:none}.main{padding:1rem .85rem}.shell{padding-bottom:150px}.bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:24;background:var(--white);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.bottomnav-link{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.5rem 0 .45rem;color:var(--slate);text-decoration:none;font-size:.78rem}.bottomnav-link.active{color:var(--navy);font-weight:700}.fab{bottom:calc(72px + env(safe-area-inset-bottom));right:1rem}.toasts{bottom:140px}.row-2{grid-template-columns:1fr}.task{flex-direction:column;align-items:stretch}.task-actions{display:grid;grid-template-columns:1fr 1fr}.task-actions .btn{width:100%}.company-head{grid-template-columns:1fr}.company-row-side{display:none}.modal-backdrop{align-items:flex-end;padding:0}.modal{max-width:none;border-radius:18px 18px 0 0;max-height:94vh}.details dl{grid-template-columns:1fr;gap:.1rem}.details dd{margin-bottom:.5rem}}.line-box{margin-top:1rem;border:1px solid var(--line);border-radius:var(--radius);padding:.8rem .9rem;background:var(--blue-50);display:flex;flex-direction:column;gap:.5rem}.line-head{display:flex;align-items:center;gap:.5rem;color:var(--navy)}.line-head .badge{display:inline-flex;align-items:center;gap:.25rem}.btn-row.start{justify-content:flex-start}.line-steps{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.7rem}.line-steps li>div,.line-steps li>a{margin-top:.35rem}.line-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.5rem;font-weight:700;letter-spacing:.15em;color:var(--navy);background:var(--white);border:1px dashed var(--blue);border-radius:10px;padding:.35rem .7rem;width:fit-content;-webkit-user-select:all;user-select:all}.team-line{margin-left:.4rem}
