/*
 * PIGY UI — เลเยอร์ดีไซน์ซิสเท็มกลางของหน้าสตูดิโอทั้งหมด
 *
 * ใช้ร่วมกับ styles.css (ซึ่งเป็น source of truth ของ dock, ฟอนต์ และธีม)
 * ไฟล์นี้เก็บเฉพาะ "ชิ้นส่วนที่ใช้ซ้ำ" ของหน้าเนื้อหา เช่น การ์ด ปุ่ม สวิตช์ แท็บ และ toast
 * ทุกค่าอิงตัวแปรใน :root ด้านล่าง เพื่อให้ปรับ CI ได้จากจุดเดียว
 */

:root{
  --pigy-pink:#f34e98;
  --pigy-pink-deep:#d5277a;
  --pigy-pink-soft:#ffe8f3;
  --pigy-violet:#8b5cf6;
  --pigy-violet-soft:#f0e9ff;
  --pigy-gold:#ffc94d;
  --pigy-mint:#3fbf94;
  --pigy-text:#3a2740;
  --pigy-dim:#8c7182;
  --pigy-line:#f2e3ed;
  --pigy-surface:#ffffff;
  --pigy-page:linear-gradient(160deg,#fff7fc 0%,#fdf4ff 46%,#f6f2ff 100%);
  --pigy-radius:22px;
  --pigy-shadow:0 14px 34px rgba(120,58,100,.09);
  --pigy-shadow-lift:0 20px 46px rgba(120,58,100,.16);
}

/* ซ่อนข้อความไว้เฉพาะ screen reader (ใช้ทุกหน้า) */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- โครงหน้า ---------- */
.studio-page{max-width:1460px;min-height:100vh;margin-inline:auto;padding:28px 28px 210px;color:var(--pigy-text);background:var(--pigy-page);font-family:"LINE Seed Sans TH",Tahoma,sans-serif}
.studio-topbar{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.studio-topbar .brand{display:flex;align-items:center;gap:9px;color:var(--pigy-pink-deep);font-size:24px;font-weight:800;text-decoration:none}
.studio-topbar .brand img{width:34px;height:34px;object-fit:contain}
.studio-title{padding-left:16px;border-left:1px solid var(--pigy-line)}
.studio-title h1{margin:0;font-size:17px;letter-spacing:-.02em}
.studio-title p{margin:2px 0 0;color:var(--pigy-dim);font-size:12px}
.studio-actions{display:flex;align-items:center;gap:10px;margin-left:auto}

/* ---------- แบนเนอร์หัวหน้าสีชมพู ---------- */
.hero-banner{position:relative;min-height:210px;margin-bottom:18px;padding:34px 40px;overflow:hidden;border-radius:28px;color:#fff;background:radial-gradient(circle at 74% 26%,rgba(255,255,255,.34),transparent 26%),linear-gradient(118deg,#f83990 0%,#fb63a8 52%,#f58ec4 100%);box-shadow:0 20px 44px rgba(224,63,135,.22)}
.hero-banner:before{position:absolute;right:6%;top:-70px;width:250px;height:250px;border-radius:50%;content:"";background:rgba(255,255,255,.1)}
.hero-banner:after{position:absolute;right:-40px;bottom:-90px;width:220px;height:220px;border-radius:50%;content:"";background:rgba(255,255,255,.09)}
.hero-banner .eyebrow{display:inline-flex;margin:0;padding:7px 13px;border:1px solid rgba(255,255,255,.4);border-radius:99px;background:rgba(255,255,255,.18);font-size:11px;font-weight:800;letter-spacing:.12em;backdrop-filter:blur(14px)}
.hero-banner h1{position:relative;z-index:1;margin:14px 0 8px;font-size:clamp(30px,4.2vw,50px);line-height:1.05;letter-spacing:-.035em}
.hero-banner h1 em{color:#ffe1ef;font-style:normal}
.hero-banner>p{position:relative;z-index:1;max-width:520px;margin:0;color:rgba(255,255,255,.9);font-size:14px}
.hero-banner .hero-pig{position:absolute;right:5%;bottom:-26px;z-index:1;height:255px;filter:drop-shadow(0 16px 20px rgba(110,28,68,.24))}

/* ---------- การ์ดและแผง ---------- */
.panel{padding:22px;border:1px solid var(--pigy-line);border-radius:var(--pigy-radius);background:var(--pigy-surface);box-shadow:var(--pigy-shadow)}
.panel-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.panel-head h2{margin:0;font-size:19px;letter-spacing:-.02em}
.panel-head p{margin:2px 0 0;color:var(--pigy-dim);font-size:12px}
.panel-head .spacer{margin-left:auto}
.panel-icon{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:15px;color:#fff;background:linear-gradient(145deg,#ff7ab5,#a76df6);box-shadow:0 8px 18px rgba(167,109,246,.24);font-size:21px}
.link-more{color:var(--pigy-pink);font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap}
.link-more:hover{text-decoration:underline}

/* ---------- ปุ่ม ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border:1px solid transparent;border-radius:13px;color:var(--pigy-text);background:#fff;font:inherit;font-size:13px;font-weight:800;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid rgba(243,78,152,.34);outline-offset:2px}
.btn-primary{color:#fff;background:linear-gradient(135deg,#fb4c98,#e02f80);box-shadow:0 12px 24px rgba(214,62,142,.26)}
.btn-violet{color:#fff;background:linear-gradient(135deg,#a86bff,#7c48e8);box-shadow:0 12px 24px rgba(124,72,232,.26)}
.btn-soft{color:var(--pigy-pink-deep);background:var(--pigy-pink-soft);border-color:#ffd3e7}
.btn-ghost{border-color:var(--pigy-line);color:var(--pigy-dim);background:#fff}
.btn-ghost:hover{border-color:#f4b7d4;color:var(--pigy-pink)}
.btn-sm{min-height:34px;padding:0 12px;border-radius:11px;font-size:12px}
.btn-block{width:100%}
.btn[disabled]{opacity:.6;cursor:default;transform:none}

/* ---------- สวิตช์เปิด/ปิด ---------- */
.toggle{position:relative;flex:none;width:52px;height:29px;padding:0;border:0;border-radius:99px;background:#dfd6dd;transition:background .26s}
.toggle:after{position:absolute;left:3px;top:3px;width:23px;height:23px;border-radius:50%;content:"";background:#fff;box-shadow:0 2px 5px rgba(80,40,66,.24);transition:transform .26s cubic-bezier(.22,.85,.28,1)}
.toggle[aria-checked="true"]{background:linear-gradient(135deg,#fb4c98,#e02f80)}
.toggle[aria-checked="true"]:after{transform:translateX(23px)}
.toggle:focus-visible{outline:3px solid rgba(243,78,152,.34);outline-offset:3px}

/* ---------- แท็บและชิป ---------- */
.pill-tabs{display:inline-flex;gap:4px;padding:5px;border:1px solid var(--pigy-line);border-radius:15px;background:#fff}
.pill-tabs button{min-height:36px;padding:0 18px;border:0;border-radius:11px;color:var(--pigy-dim);background:transparent;font:inherit;font-size:13px;font-weight:800;transition:.24s}
.pill-tabs button[aria-selected="true"],.pill-tabs button.active{color:#fff;background:linear-gradient(135deg,#fb4c98,#e02f80);box-shadow:0 8px 16px rgba(214,62,142,.24)}
.pill-tabs button:focus-visible{outline:3px solid rgba(243,78,152,.34);outline-offset:2px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--pigy-line);border-radius:99px;color:var(--pigy-dim);background:#fff;font:inherit;font-size:12px;font-weight:800;transition:.22s}
.chip[aria-pressed="true"],.chip.active{border-color:#ffb9d8;color:var(--pigy-pink-deep);background:var(--pigy-pink-soft)}
.chip:focus-visible{outline:3px solid rgba(243,78,152,.34);outline-offset:2px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:800;line-height:1.6}
.badge-on{color:#1f8f68;background:#dcf7ec}
.badge-off{color:#8c7182;background:#f0eaee}
.badge-pro{color:#fff;background:linear-gradient(135deg,#ff8ac2,#e6479b)}
.badge-proplus{color:#fff;background:linear-gradient(135deg,#a86bff,#6f42db)}
.badge-verified{color:#1f8f68;background:#dcf7ec}

/* ---------- ฟอร์ม ---------- */
.field{display:grid;gap:7px}
.field>span{color:#6f5568;font-size:12px;font-weight:800}
.field input,.field textarea,.field select{width:100%;min-height:46px;padding:12px 14px;border:1px solid var(--pigy-line);border-radius:13px;outline:0;color:var(--pigy-text);background:#fff;font:inherit;font-weight:400;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:88px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#f37fb4;box-shadow:0 0 0 3px rgba(243,78,152,.13)}
.field .counter{color:#b49aab;font-size:11px;text-align:right}
.field-hint{margin:0;color:var(--pigy-dim);font-size:11.5px}

/* ---------- แถบความคืบหน้า ---------- */
.bar{height:9px;overflow:hidden;border-radius:99px;background:#f3e6ef}
.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#fb4c98,#ff86bf);transition:width .5s cubic-bezier(.22,.85,.28,1)}

/* ---------- อวาตาร์ ---------- */
.avatar{display:grid;place-items:center;flex:none;width:42px;height:42px;overflow:hidden;border-radius:50%;color:#fff;background:linear-gradient(145deg,#ff86bf,#a76df6);font-size:15px;font-weight:800}
.avatar img{width:100%;height:100%;object-fit:cover}

/* ---------- รายการทั่วไป ---------- */
.row-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.row{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--pigy-line);border-radius:17px;background:#fff;transition:border-color .22s,box-shadow .22s}
.row:hover{border-color:#f6cde1;box-shadow:0 8px 20px rgba(120,58,100,.07)}
.row strong{display:block;font-size:14px}
.row small{display:block;color:var(--pigy-dim);font-size:12px}
.row .spacer{margin-left:auto}

/* ---------- Toast กลาง ---------- */
.pigy-toast{position:fixed;z-index:80;left:50%;bottom:36px;padding:12px 18px;border-radius:14px;color:#fff;background:#2c2130;box-shadow:0 14px 32px rgba(0,0,0,.26);font-size:13px;font-weight:800;opacity:0;pointer-events:none;transform:translate(-50%,20px);transition:opacity .24s,transform .24s}
.pigy-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- ธีม Ninja ---------- */
body.ninja{--pigy-text:#f2edf3;--pigy-dim:#b6a5b3;--pigy-line:rgba(255,255,255,.09);--pigy-surface:#25262d;--pigy-page:radial-gradient(circle at 84% 6%,rgba(149,75,180,.16),transparent 26%),linear-gradient(145deg,#191a1f,#22232a);--pigy-pink-soft:rgba(251,76,152,.16);--pigy-violet-soft:rgba(139,92,246,.16);--pigy-shadow:0 14px 34px rgba(0,0,0,.28)}
body.ninja .studio-topbar .brand{color:#ff87c0}
body.ninja .btn{color:var(--pigy-text);background:#2c2d35}
body.ninja .btn-ghost{background:#2c2d35}
body.ninja .btn-soft{color:#ffa5cd;border-color:rgba(255,255,255,.1)}
body.ninja .pill-tabs,body.ninja .chip,body.ninja .field input,body.ninja .field textarea,body.ninja .field select,body.ninja .row{color:var(--pigy-text);background:#2c2d35}
body.ninja .chip[aria-pressed="true"],body.ninja .chip.active{color:#ffa5cd;border-color:rgba(255,138,194,.4)}
body.ninja .toggle{background:#43414c}
body.ninja .bar{background:rgba(255,255,255,.09)}
body.ninja .badge-off{color:#c0b0bd;background:rgba(255,255,255,.09)}
body.ninja .pigy-toast{background:#3a3742}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .studio-page{padding:22px 18px 200px}
  .hero-banner{padding:26px 24px}
  .hero-banner .hero-pig{right:-10px;height:180px;opacity:.9}
  .hero-banner>p{max-width:60%}
}
@media(max-width:640px){
  .studio-page{padding:17px 14px 190px}
  .studio-topbar{flex-wrap:wrap;gap:10px}
  .studio-title{width:100%;padding:0;border:0}
  .studio-actions{margin-left:0}
  .hero-banner{min-height:0;padding:22px 20px}
  .hero-banner h1{font-size:26px}
  /* กันข้อความไปมุดใต้มาสคอตบนจอแคบ */
  .hero-banner .hero-pig{right:-22px;bottom:-12px;height:124px;opacity:.75}
  .hero-banner h1,.hero-banner>p{max-width:calc(100% - 86px)}
  .panel{padding:16px}
}
@media(prefers-reduced-motion:reduce){
  .btn:hover{transform:none}
}

/* ---------- Universal Modals (PIGY Design System) ---------- */
.pigy-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(22, 17, 28, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  opacity: 0;
  transition: opacity 0.24s ease;
  pointer-events: none;
}
.pigy-modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}
.pigy-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.95);
  width: min(500px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: 0 24px 60px rgba(36, 20, 32, 0.28), 0 0 0 1px rgba(243, 78, 152, 0.15);
  z-index: 101;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
}
.pigy-modal.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.pigy-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f4ecf2;
  color: #6a5265;
  font-size: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pigy-modal-close:hover {
  background: #ecdce8;
  color: #f34e98;
}
.modal-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff74af, #9c68f5);
  color: #fff;
  font-size: 26px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  box-shadow: 0 6px 16px rgba(243, 78, 152, 0.28);
}
.pigy-modal h2 {
  font-size: 22px;
  text-align: center;
  margin: 0 0 4px;
  color: var(--pigy-text);
}
.modal-sub {
  font-size: 13px;
  color: var(--pigy-dim);
  text-align: center;
  margin: 0 0 20px;
}
body.ninja .pigy-modal {
  background: #25262d;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
body.ninja .pigy-modal-close {
  background: #34353f;
  color: #d1c1cf;
}

/* กระดิ่งแจ้งเตือนบนแถบหัว */
.notif-bell{position:relative;display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--pigy-line,#f2e3ed);border-radius:50%;background:#fff;font-size:16px;text-decoration:none}
.notif-bell i{position:absolute;right:-2px;top:-2px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 3px;border-radius:99px;color:#fff;background:#f34e98;font-size:9px;font-style:normal;font-weight:800}
.notif-bell:focus-visible{outline:3px solid rgba(243,78,152,.34);outline-offset:2px}
body.ninja .notif-bell{border-color:rgba(255,255,255,.1);background:#2c2d35;color:#f1e8ef}

/* ---------- Alert บนหน้าหลังบ้าน ---------- */
.web-alert{position:fixed;z-index:40;right:16px;top:16px;display:flex;gap:12px;align-items:center;max-width:min(380px,calc(100vw - 32px));padding:12px 16px 12px 12px;border:1px solid rgba(255,255,255,.8);border-radius:20px;background:rgba(255,250,253,.97);box-shadow:0 18px 50px rgba(64,20,47,.22);opacity:0;transform:translateY(-12px);transition:opacity .28s,transform .32s cubic-bezier(.22,.85,.28,1)}
.web-alert.show{opacity:1;transform:none}
.web-alert img{width:54px;height:54px;object-fit:contain;flex:none}
.web-alert small{display:block;color:#ed4b96;font-size:10px;font-weight:800;letter-spacing:.14em}
.web-alert b{color:#3f2940;font-size:15px}
.web-alert span{color:#8d7489;font-size:13px}
.web-alert strong{color:#e02f80;font-size:17px}
.web-alert p{margin:4px 0 0;color:#5f4a5a;font-size:12.5px;line-height:1.45}
body.ninja .web-alert{border-color:rgba(255,255,255,.1);background:rgba(34,35,41,.97)}
body.ninja .web-alert b{color:#f2edf3}

/* ---------- แถบแจ้งสถานะด้านบนสุด ---------- */
.shell-banner{position:sticky;z-index:35;top:0;display:flex;gap:10px;align-items:center;justify-content:center;padding:8px 16px;font-size:13px;font-weight:700;text-align:center}
.shell-banner.team{color:#3d2c7a;background:#e9e2ff}
.shell-banner.verify{color:#7a4b12;background:#fff0d6}
.shell-banner button{border:0;border-radius:99px;padding:5px 12px;color:#fff;background:#8b5cf6;font:inherit;font-size:12px;font-weight:800}
.shell-banner.verify button{background:#e58c1e}

/* ---------- ป้ายตัวเลข (เช่น สลิปที่รอตรวจ) ---------- */
.count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;color:#fff;background:#e02f80;font-size:11px;font-weight:800;vertical-align:middle}

/* ---------- รายการที่ถูกล็อกหลังดาวน์เกรด ---------- */
.locked-item{opacity:.55;position:relative}
.locked-item::after{content:"🔒 เกินโควตาแพ็กเกจ";position:absolute;right:12px;top:12px;padding:3px 9px;border-radius:99px;background:#f0eaee;color:#8c7182;font-size:11px;font-weight:800}

/* ---------- ชิปแบบลบได้ (คำต้องห้าม / ปุ่มจำนวนเงิน) ---------- */
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.tag-list .tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;background:var(--pigy-pink-soft);color:var(--pigy-pink-deep);font-size:12px;font-weight:800}
.tag-list .tag button{border:0;background:transparent;color:inherit;font:inherit;font-size:14px;line-height:1;cursor:pointer}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-form input{flex:1;min-width:160px}