/* ---------------- Mission system (ภารกิจ) ----------------
   ใช้ token/คอมโพเนนต์เดิมทั้งหมด (--card/--line/--radius/--yellow/--black, .chip, .admin-input, .btn, .stat-box, .empty-state)
   ไม่ประกาศสี/ฟอนต์ใหม่ — มีเฉพาะ layout ของหน้าภารกิจ (ms-*) และหน้าแอดมิน (am-*) */
.ms-h1{font-size:var(--fs-2xl); font-weight:800; margin:0 0 14px;}
.ms-loading{padding:30px 4px; color:var(--muted); font-size:var(--fs-base);}

/* ---- ผู้ใช้ ---- */
.ms-coin{background:var(--black); color:#fff; border-radius:20px; padding:16px 18px; margin-bottom:8px;}
.ms-coin-bal{font-size:var(--fs-lg); display:flex; align-items:center; gap:6px; color:var(--yellow);}
.ms-coin-bal b{font-size:var(--fs-3xl); font-weight:800; line-height:1.1; color:#fff; margin-left:2px;}
.ms-coin-hist{list-style:none; margin:10px 0 0; padding:0; font-size:var(--fs-xs); color:#B7B5AB; display:flex; flex-direction:column; gap:4px;}
.ms-coin-hist li{display:flex; gap:10px;}
.ms-plus{color:var(--yellow); font-weight:700; min-width:52px;} .ms-minus{color:#FF9E88; font-weight:700; min-width:52px;}
.ms-section{margin-top:22px;}
.ms-section-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.ms-section-title{font-size:var(--fs-lg); font-weight:800;}
.ms-section-meta{font-size:var(--fs-sm); color:var(--muted);} .ms-section-meta b{color:var(--ink);}
.ms-expire{font-size:var(--fs-xs); color:var(--muted); margin:4px 0 10px; display:flex; align-items:center; gap:2px; flex-wrap:wrap;}
.ms-list{display:grid; grid-template-columns:1fr; gap:10px;}
@media (min-width:860px){ .ms-list{grid-template-columns:repeat(2,1fr);} }
.ms-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; gap:8px; transition:box-shadow 180ms var(--ease-pop);}
.ms-card-done{background:var(--success-bg); border-color:var(--success-border);}
.ms-card-head{display:flex; align-items:center; gap:10px;}
.ms-card-icon{width:28px; height:28px; border-radius:50%; background:var(--yellow); color:var(--black); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.ms-card-icon .ic{margin:0 !important;}
.ms-card-done .ms-card-icon{background:var(--success); color:#fff;}
.ms-card-title{font-weight:700; font-size:var(--fs-md); line-height:1.35;}
.ms-card-desc{font-size:var(--fs-sm); color:var(--muted); font-weight:300;}
.ms-conds{list-style:none; margin:0; padding:0; font-size:var(--fs-sm); color:var(--ink); display:flex; flex-direction:column; gap:3px;}
.ms-conds li{line-height:1.4;} .ms-cond-done{color:var(--success);} .ms-cur{color:var(--muted); font-weight:600;}
.ms-op-note{font-size:var(--fs-2xs); font-weight:700; color:var(--muted); letter-spacing:0.02em;}
.ms-bar{height:9px; border-radius:999px; background:rgba(18,18,18,0.08); overflow:hidden;}
.ms-bar-fill{height:100%; background:var(--black); border-radius:999px; transition:width 500ms var(--ease-pop);}
.ms-card-done .ms-bar-fill{background:var(--success);}
.ms-card-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;}
.ms-pct{font-size:var(--fs-xs); font-weight:700; color:var(--muted);} .ms-card-done .ms-pct{color:var(--success);}
.ms-rewards{display:flex; gap:6px; flex-wrap:wrap;}
.ms-reward{display:inline-flex; align-items:center; gap:2px; font-size:var(--fs-xs); font-weight:700; background:#FBEBAF; color:#6B5A05; padding:4px 10px; border-radius:999px;}
.ms-reward .ic{margin-right:2px !important;} .ms-reward-img{width:16px; height:16px; border-radius:50%; object-fit:cover; margin-right:4px;}
.ms-got{font-size:var(--fs-xs); font-weight:700; color:var(--success);}
.ms-badges{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:10px; margin-top:10px;}
.ms-badge{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px 8px; text-align:center;}
.ms-badge img,.ms-badge-ph{width:52px; height:52px; border-radius:50%; object-fit:cover; display:flex; align-items:center; justify-content:center; margin:0 auto 6px; background:var(--yellow);}
.ms-badge-ph .ic{margin:0 !important;}
.ms-badge-name{font-size:var(--fs-xs); font-weight:700; line-height:1.3;} .ms-badge-date{font-size:var(--fs-2xs); color:var(--muted); margin-top:2px;}
.ms-group{margin-top:22px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;}
.ms-group-needed{margin-top:14px; border:2px solid var(--yellow-deep); background:#FBF7E3;}
.ms-group-title{font-weight:700; font-size:var(--fs-base); margin-bottom:10px;}
.ms-group-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:10px; margin-bottom:12px;}
.ms-group-note{font-size:var(--fs-xs); color:var(--muted); margin-top:8px;}

/* ---- แอดมิน ---- */
.am-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.am-title{font-size:var(--fs-md); font-weight:800;}
.am-toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
.am-toolbar .admin-input{flex:1; min-width:130px; width:auto;}
.am-small{width:auto !important; padding:7px 14px !important; font-size:var(--fs-sm) !important; border-width:1.5px;}
.am-tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:14px; background:var(--card); margin-bottom:6px;}
.am-table{border-collapse:collapse; width:100%; font-size:var(--fs-sm); min-width:760px;}
.am-table th{text-align:left; font-size:var(--fs-xs); color:var(--muted); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap;}
.am-table td{padding:10px 12px; border-top:1px solid var(--line); vertical-align:top;}
.am-acts{display:flex; gap:6px; flex-wrap:wrap;}
.am-sub{font-size:var(--fs-xs); color:var(--muted); font-weight:300; margin-top:2px;}
.am-hint{font-size:var(--fs-xs); color:var(--muted); line-height:1.5; margin:6px 0;}
.am-empty{text-align:center; color:var(--muted); padding:22px; font-size:var(--fs-sm);}
.am-status{font-size:var(--fs-2xs); font-weight:700; padding:3px 9px; border-radius:999px; background:rgba(18,18,18,0.07); white-space:nowrap;}
.am-status-active{background:var(--success-bg); color:var(--success);} .am-status-draft{background:#FBEBAF; color:#6B5A05;} .am-status-archived{background:rgba(18,18,18,0.07); color:var(--muted);}
.am-editor{max-width:760px;}
.am-editor-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px;}
.am-f{margin-top:12px;} .am-row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;} @media (max-width:520px){ .am-row2{grid-template-columns:1fr;} }
.am-editor textarea.admin-input{resize:vertical;}
.am-check{display:flex; gap:8px; align-items:flex-start; font-size:var(--fs-sm); font-weight:600; line-height:1.4;}
.am-actions{margin-top:22px;}
.am-x{border:none; background:rgba(18,18,18,0.07); color:var(--ink); width:28px; height:28px; border-radius:50%; font-size:var(--fs-sm); flex-shrink:0; line-height:1;}
.am-x:active{transform:scale(0.9);}
.am-group{border:1.5px solid var(--line); border-radius:14px; padding:10px; background:var(--card);}
.am-group-nested{background:rgba(18,18,18,0.025); margin:4px 0;}
.am-group-head{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.am-group-label{font-size:var(--fs-xs); font-weight:700; color:var(--muted); white-space:nowrap;}
.am-op{width:auto !important; flex:1; max-width:240px;}
.am-op-sep{text-align:center; font-size:var(--fs-2xs); font-weight:800; color:var(--muted); letter-spacing:0.04em; margin:6px 0;}
.am-leaf{border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--paper);}
.am-leaf-top{display:flex; gap:8px; align-items:center;}
.am-leaf-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:8px; margin-top:8px;}
.am-leaf-grid .am-f{margin-top:0;} .am-f-wide{grid-column:1/-1;}
.am-group-add{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.am-target,.am-reward-row{display:flex; gap:8px; margin-bottom:8px; align-items:center;} .am-target .admin-input,.am-reward-row .admin-input{flex:1; min-width:0;}
.am-imgrow{display:flex; align-items:center; gap:12px;}
.am-imgprev,.am-badgeimg{width:64px; height:64px; border-radius:50%; overflow:hidden; background:var(--yellow); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.am-imgprev img,.am-badgeimg img{width:100%; height:100%; object-fit:cover;} .am-imgprev .ic,.am-badgeimg .ic{margin:0 !important;}
.am-badgegrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:10px;}
.am-badgecard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; display:flex; flex-direction:column; gap:4px;}
.am-off{opacity:0.55;} .am-badgename{font-weight:700;} .am-badgecard .am-acts{margin-top:8px;} .am-badgelog{margin-top:4px;}
.am-facs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
.am-fac{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:4px 6px 4px 12px;}
.am-audit{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.am-auditrow{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:var(--fs-sm); word-break:break-word;}
.am-user{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; margin-top:10px;}
@media (prefers-reduced-motion:reduce){ .ms-bar-fill{transition:none;} }