:root{
  --bg:#f5f6fa; --surface:#ffffff; --surface-2:#f4f5f9; --line:#e9ebf2; --line-2:#dfe2ec;
  --text:#1f2430; --muted:#868da0; --white:#fff;
  --primary:#5b5bef; --primary-d:#4a48d6; --primary-soft:#eeeefe;
  --pink:#ec4899; --rose:#f43f5e; --amber:#f59e0b; --teal:#14b8a6;
  --green:#22c55e; --blue:#3b82f6; --violet:#8b5cf6;
  --radius:16px; --radius-sm:11px;
  --shadow-sm:0 1px 2px rgba(30,36,60,.06), 0 2px 8px rgba(30,36,60,.05);
  --shadow:0 6px 22px -8px rgba(40,40,110,.18);
  --shadow-lg:0 18px 44px -18px rgba(40,40,110,.32);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Noto Sans Thai","Segoe UI",Tahoma,-apple-system,sans-serif;
  color:var(--text); font-size:15px; line-height:1.55; background:var(--bg); min-height:100vh;
}
button{font-family:inherit; cursor:pointer}
input,select,textarea{font-family:inherit}
a{color:inherit}
::selection{background:#dcdcfb}

/* Layout */
.app{display:grid; grid-template-columns:258px 1fr; min-height:100vh}
.sidebar{background:var(--surface); border-right:1px solid var(--line); padding:22px 15px;
  position:sticky; top:0; height:100vh; overflow-y:auto}
.brand{display:flex; gap:12px; align-items:center; margin-bottom:24px; padding:0 6px}
.brand .logo{width:42px; height:42px; border-radius:12px; background:var(--primary);
  display:grid; place-items:center; font-size:22px; color:#fff; box-shadow:var(--shadow-sm)}
.brand .logo img, .login-logo img, .brand-preview img{width:100%; height:100%; object-fit:contain; display:block}
.brand h1{font-size:15.5px; margin:0; font-weight:800; letter-spacing:.2px}
.brand h1 small{display:block; font-size:10px; font-weight:800; letter-spacing:2.5px; color:var(--pink); margin-top:2px}

.nav{display:flex; flex-direction:column; gap:2px}
.nav button{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:transparent;
  border:none; color:#565d70; padding:10px 13px; border-radius:11px; font-size:14.5px; font-weight:600; transition:.15s}
.nav button .ic{width:22px; text-align:center; font-size:16px}
.nav button:hover{background:var(--surface-2); color:var(--text)}
.nav button.active{background:var(--primary); color:#fff; box-shadow:var(--shadow-sm)}

.account{margin-top:20px; padding:13px; background:var(--surface-2); border:1px solid var(--line); border-radius:14px}
.account .who{display:flex; gap:11px; align-items:center; margin-bottom:11px}
.account .avatar{width:38px; height:38px; border-radius:11px; background:var(--pink);
  display:grid; place-items:center; font-weight:800; font-size:16px; color:#fff; flex:none}
.account .name{font-weight:700; font-size:14px}
.account .role{font-size:11.5px; color:var(--muted)}
.account-actions{display:flex; gap:7px}
.account-actions .btn{flex:1}
.sidebar .foot{margin-top:18px; padding:0 8px; color:var(--muted); font-size:11px; display:flex; justify-content:space-between}

/* Main */
.main{padding:28px 34px; max-width:1240px}
.page{display:none}
.page.active{display:block; animation:fadeUp .35s cubic-bezier(.2,.8,.2,1)}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)}to{opacity:1;transform:none}}
.page-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap}
.page-head h2{margin:0; font-size:25px; font-weight:800; letter-spacing:-.3px}
.page-head p{margin:3px 0 0; color:var(--muted); font-size:13.5px}

/* Cards / forms */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:21px;
  margin-bottom:18px; box-shadow:var(--shadow-sm); transition:.2s}
.card h3{margin:0 0 14px; font-size:16px; font-weight:700}
.form-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.form-row>*{flex:1; min-width:150px}
input,select,textarea{background:#fff; border:1.5px solid var(--line-2); color:var(--text);
  padding:10px 13px; border-radius:10px; width:100%; outline:none; transition:.15s; font-size:14.5px}
input::placeholder,textarea::placeholder{color:#aab0c0}
input:focus,select:focus,textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px #5b5bef22}
textarea{resize:vertical; min-height:52px}
label.small{font-size:12px; color:var(--muted); display:block; margin-bottom:5px}
.btn{border:none; border-radius:10px; padding:11px 18px; font-weight:700; color:#fff; font-size:14.5px; transition:.15s}
.btn:hover{filter:brightness(1.05); transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.99)}
.btn.red{background:var(--primary); width:100%}
.btn.blue{background:var(--primary)}
.btn.ghost{background:#fff; color:#565d70; border:1.5px solid var(--line-2)}
.btn.ghost:hover{background:var(--surface-2); filter:none}
.btn.sm{padding:7px 12px; font-size:12.5px}

/* Stat cards — สีสดใส */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px}
.stat{border-radius:var(--radius); padding:19px 20px; color:#fff; box-shadow:var(--shadow); position:relative;
  overflow:hidden; transition:.22s}
.stat::after{content:""; position:absolute; right:-24px; top:-24px; width:96px; height:96px; border-radius:50%; background:rgba(255,255,255,.15)}
.stat:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.stat.red{background:linear-gradient(135deg,#fb7185,#ec4899)}
.stat.blue{background:linear-gradient(135deg,#38bdf8,#3b82f6)}
.stat.green{background:linear-gradient(135deg,#34d399,#10b981)}
.stat.dark{background:linear-gradient(135deg,#a78bfa,#8b5cf6)}
.stat .n{font-size:40px; font-weight:800; line-height:1; margin-top:2px}
.stat .t{font-size:12.5px; opacity:.92; margin-top:6px}
.stat .lbl{font-size:12.5px; opacity:.95; font-weight:700}

/* List items */
.list{display:flex; flex-direction:column; gap:10px}
.item{display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:13px; padding:13px 15px; transition:.16s}
.item:hover{border-color:var(--line-2); box-shadow:var(--shadow-sm)}
.item .chk{width:19px; height:19px; margin-top:3px; accent-color:var(--green); cursor:pointer; flex:none}
.item .body{flex:1; min-width:0}
.item .body .h{font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.item .body .m{font-size:12.5px; color:var(--muted); margin-top:5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.item.done{opacity:.6}
.item.done .h{text-decoration:line-through}
.item .actions{display:flex; gap:8px; flex:none}
.item .del{width:38px; height:38px; flex:none; background:#fff; border:1.5px solid var(--line-2); color:#7b8196;
  font-size:18px; border-radius:10px; display:grid; place-items:center; transition:.15s; line-height:1}
.item .del:hover{color:#e11d48; border-color:#fda4af; background:#fff1f3; transform:translateY(-1px)}
.item .del.edit:hover{color:var(--primary); border-color:var(--primary); background:var(--primary-soft)}
.tag{display:inline-block; font-size:11px; padding:2px 9px; border-radius:20px; background:var(--surface-2); color:#6b7186; font-weight:600}
.tag.ch{background:#e6effe; color:#2563eb}
.tag.st{background:#e4faec; color:#16a34a}
.item .meta{font-size:11px; color:#a7adbe; margin-top:6px}
.item .meta b{color:#767c92; font-weight:700}

/* who pill + avatars */
.who-pill{display:inline-flex; align-items:center; gap:6px; background:var(--primary-soft); color:#4a48b8;
  padding:2px 10px 2px 3px; border-radius:20px; font-size:11.5px; font-weight:700}
.who-pill.none{background:var(--surface-2); color:#9aa0b2; padding:2px 10px}
.wav{width:22px; height:22px; border-radius:50%; background:var(--primary); color:#fff; display:grid;
  place-items:center; font-size:11px; font-weight:800; flex:none}
.wav.sm{width:18px; height:18px; font-size:10px}

/* Workload strip */
.workload{display:flex; gap:10px; flex-wrap:wrap}
.wchip{display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1.5px solid var(--line);
  border-radius:30px; padding:6px 13px 6px 6px; font-size:13px; font-weight:600; color:var(--text); transition:.15s}
.wchip:hover{border-color:var(--primary); background:#fff}
.wchip.active{border-color:var(--primary); background:var(--primary-soft)}
.wchip .wnm{font-weight:700}
.wchip .wct{font-size:11.5px; color:var(--muted)}
.wchip .wwait{font-size:11px; color:#b45309; background:#fef3c7; padding:1px 8px; border-radius:20px; font-weight:700}

/* Brand setting (โลโก้) */
.brand-setting{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap}
.brand-preview{width:74px; height:74px; border-radius:16px; background:var(--surface-2); border:1px solid var(--line);
  display:grid; place-items:center; font-size:34px; overflow:hidden; flex:none}

/* Channel cards (โพสต์ล่าสุด) */
.channel-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-bottom:18px}
.chcard{background:#fff; border:1px solid var(--line); border-radius:15px; padding:17px; box-shadow:var(--shadow-sm); transition:.2s}
.chcard:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.chcard.off{background:var(--surface-2)}
.chtop{display:flex; align-items:center; gap:10px; margin-bottom:11px}
.chic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px; flex:none}
.chic.ch-fb{background:#1877f2}
.chic.ch-ig{background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7); font-size:11px}
.chic.ch-tt{background:#111}
.chic.ch-line{background:#06c755}
.chname{font-weight:800; font-size:15px}
.chago{margin-left:auto; font-size:11.5px; font-weight:700; color:#15803d; background:#e4faec; padding:3px 10px; border-radius:20px}
.chago.none{color:#b45309; background:#fef3c7}
.chpost{font-size:14px; font-weight:600; line-height:1.5; min-height:42px}
.chpost.empty-post{color:var(--muted); font-weight:400; display:flex; align-items:center}
.chmeta{font-size:11.5px; color:var(--muted); margin-top:7px}

/* Filter bar */
.filterbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.filterbar>select{max-width:200px}
.chips{display:flex; gap:7px; flex-wrap:wrap}
.chip{background:var(--surface-2); border:1.5px solid var(--line); color:#565d70; padding:7px 13px;
  border-radius:20px; font-size:12.5px; font-weight:700; transition:.15s}
.chip:hover{border-color:var(--line-2)}
.chip.active{background:var(--primary); color:#fff; border-color:var(--primary)}

/* Badges / status */
.badge{font-size:11px; padding:2px 10px; border-radius:20px; font-weight:800}
.badge.todo{background:#eceef4; color:#6b7186}
.badge.doing{background:#e6effe; color:#2563eb}
.badge.waiting{background:#fef3c7; color:#b45309}
.badge.done{background:#e4faec; color:#15803d}
.badge.planning{background:#fef3c7; color:#b45309}
.badge.running{background:#e4faec; color:#15803d}
.badge.paused{background:#fee2e2; color:#b91c1c}

/* Post-it */
.board{background:linear-gradient(135deg,#e2b877,#d8a760); border-radius:var(--radius); padding:24px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:22px;
  background-image:radial-gradient(#00000010 1.5px,transparent 1.5px); background-size:15px 15px}
.note{position:relative; padding:17px 15px 32px; border-radius:3px; color:#463c1a; box-shadow:0 6px 15px rgba(80,50,0,.24);
  transform:rotate(-1.5deg); min-height:150px; transition:.18s}
.note:nth-child(3n){transform:rotate(1.6deg)} .note:nth-child(2n){transform:rotate(.8deg)}
.note:hover{transform:rotate(0) scale(1.04); box-shadow:0 14px 26px rgba(80,50,0,.3); z-index:2}
.note.yellow{background:#ffe86b}.note.pink{background:#ffa8d5}.note.blue{background:#a6d8ff}.note.green{background:#bff3a3}
.note::before{content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:18px; height:18px;
  border-radius:50%; background:var(--rose); box-shadow:0 3px 5px rgba(0,0,0,.3)}
.note h4{margin:6px 0 7px; font-size:15px; font-weight:800}
.note p{margin:0; font-size:13px; white-space:pre-wrap}
.note .cat{position:absolute; bottom:9px; left:14px; font-size:10.5px; font-weight:800; opacity:.6}
.note .del{position:absolute; bottom:6px; right:8px; background:none; border:none; color:#00000055; font-size:16px; width:auto; height:auto; padding:2px 5px; border-radius:6px}
.note .del:hover{color:#b30000; background:#0000000f; transform:none}
.note .noteedit{right:34px}
.note .noteedit:hover{color:#3730a3}

/* Calendar */
.cal-head{display:flex; align-items:center; gap:14px; margin-bottom:13px}
.cal-head h3{margin:0}
.cal-nav{background:var(--primary); border:none; color:#fff; width:34px; height:34px; border-radius:9px; font-size:16px; transition:.15s}
.cal-nav:hover{filter:brightness(1.08)}
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; background:var(--surface-2); border-radius:13px; padding:11px}
.cal .dow{text-align:center; font-size:12px; font-weight:800; color:var(--muted); padding:5px 0}
.cal .cell{background:#fff; border:1px solid var(--line); border-radius:9px; min-height:94px; padding:6px 7px;
  color:var(--text); font-size:12px; overflow:hidden; transition:.14s}
.cal .cell:hover{border-color:var(--line-2)}
.cal .cell.empty{background:transparent; border:none}
.cal .cell.today{outline:2.5px solid var(--primary); outline-offset:-2px}
.cal .cell .d{font-weight:800; color:#565d70; margin-bottom:4px}
.cal .ev{background:var(--primary); color:#fff; border-radius:6px; padding:2px 6px; margin-bottom:3px; font-size:10.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer}
.cal .ev.tiktok{background:#111}.cal .ev.facebook{background:#1877f2}.cal .ev.line{background:#06c755}
.cal .ev.instagram{background:#d6249f}.cal .ev.youtube{background:#ff0000}

/* Flow */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; background:linear-gradient(135deg,#34d399,#10b981);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.flow .step{background:#fff; color:#1a1a1a; border-radius:12px; padding:14px 15px; transition:.18s}
.flow .step:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.flow .step .k{font-weight:800; font-size:14px}
.flow .step .v{font-size:12px; color:#666; margin-top:4px}
.flow .arrow{display:grid; place-items:center; color:#fff; font-size:20px}

/* Grids / misc */
.stars{color:#fbbf24; font-size:16px; letter-spacing:2px}
.grid2{display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:15px}
.grid2 .card{margin:0}
.grid2 .card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.empty{color:var(--muted); text-align:center; padding:32px; font-size:14px}

/* Login + modal */
.login-overlay{position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:linear-gradient(135deg,#6366f1,#8b5cf6 50%,#ec4899); overflow:hidden}
.login-overlay::before{content:""; position:absolute; width:320px; height:320px; border-radius:50%;
  background:rgba(255,255,255,.14); top:-70px; left:-50px}
.login-overlay::after{content:""; position:absolute; width:280px; height:280px; border-radius:50%;
  background:rgba(255,255,255,.12); bottom:-60px; right:-40px}
.login-box{position:relative; z-index:1; background:#fff; border-radius:22px; padding:36px 30px; width:346px;
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:12px; text-align:center; animation:fadeUp .4s cubic-bezier(.2,.8,.2,1)}
.login-logo{width:58px; height:58px; border-radius:16px; margin:0 auto 4px; background:var(--primary);
  display:grid; place-items:center; font-size:30px; color:#fff; box-shadow:var(--shadow)}
.login-box h1{font-size:19px; margin:0 0 8px; font-weight:800}
.login-box h1 small{display:block; font-size:10px; font-weight:800; letter-spacing:2.5px; color:var(--pink); margin-top:3px}
.login-err{color:var(--rose); font-size:13px; min-height:18px; font-weight:600}
.modal-overlay{position:fixed; inset:0; z-index:120; background:rgba(31,36,48,.5); backdrop-filter:blur(3px); display:grid; place-items:center; padding:16px}
.modal-box{background:#fff; border-radius:18px; padding:26px; width:400px; max-width:100%; display:flex; flex-direction:column;
  gap:10px; box-shadow:var(--shadow-lg); animation:fadeUp .3s cubic-bezier(.2,.8,.2,1); max-height:92vh; overflow:auto}
.modal-box h3{margin:0 0 4px; font-weight:800}

/* Media */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:17px}
.media-card{background:#fff; border:1px solid var(--line); border-radius:15px; overflow:hidden; display:flex;
  flex-direction:column; box-shadow:var(--shadow-sm); transition:.2s}
.media-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.media-thumb{aspect-ratio:16/10; background:#12141f; display:grid; place-items:center; overflow:hidden; position:relative}
.media-thumb img,.media-thumb video{width:100%; height:100%; object-fit:cover}
.media-thumb .vbadge{position:absolute; top:9px; left:9px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; padding:3px 9px; border-radius:20px; font-weight:700}
.media-body{padding:12px 13px}
.media-body .h{font-weight:700; font-size:13.5px; word-break:break-word}
.media-body .m{font-size:11.5px; color:var(--muted); margin-top:4px}
.media-actions{display:flex; gap:7px; padding:0 13px 13px}
.media-actions .btn{flex:1}
.upload-progress{margin-top:14px}
.upload-progress .bar{height:9px; background:var(--surface-2); border-radius:20px; overflow:hidden}
.upload-progress .fill{height:100%; width:0; background:var(--primary); transition:width .25s; border-radius:20px}
.upload-progress .ptext{font-size:12.5px; color:var(--muted); margin-top:7px}
input[type=file]{padding:9px; cursor:pointer}
input[type=file]::file-selector-button{background:var(--primary); color:#fff; border:none; padding:8px 14px; border-radius:9px; margin-right:11px; cursor:pointer; font-weight:700}

/* User table */
.utable{width:100%; border-collapse:collapse; font-size:14px; min-width:640px}
.utable th{text-align:left; color:var(--muted); font-weight:700; font-size:12.5px; padding:10px 11px; border-bottom:2px solid var(--line)}
.utable td{padding:11px; border-bottom:1px solid var(--line); vertical-align:middle}
.utable tbody tr:hover td{background:var(--surface-2)}
.utable .rl{font-size:11px; padding:3px 10px; border-radius:20px; font-weight:800}
.utable .rl.admin{background:#fef3c7; color:#b45309}
.utable .rl.member{background:#e6effe; color:#2563eb}
.utable .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px}
.utable .dot.on{background:var(--green)} .utable .dot.off{background:#c4c8d6}
.utable .row-actions{display:flex; gap:6px; flex-wrap:wrap}

/* Scrollbar */
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background:#d3d7e5; border-radius:20px; border:2px solid transparent; background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#bfc4d8; background-clip:padding-box}

@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static; height:auto}
  .main{padding:20px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:1fr}
  .flow .arrow{display:none}
}