/* ============================================================
   SKIN: Pastel Portal — ฟ้าพาสเทลสว่างแบบเว็บเซิร์ฟไทยคลาสสิก (อ้างอิง _image/ref.jpg)
   base.css เขียนพื้นเข้มไว้ตรง ๆ สกินนี้จึงต้องทับ body / .sky / nav / footer เอง
   ============================================================ */

body[data-skin="pastel"] {
    background: var(--c-bg);
    background-image: none;
    background-repeat: no-repeat;
    color: var(--c-text);
}

body[data-skin="pastel"] h1,
body[data-skin="pastel"] h2,
body[data-skin="pastel"] h3 { letter-spacing: 0; }

/* ---------- ตัวหนังสือใหญ่ขึ้นทั้งสกิน (ฟอนต์ไทยแบบมีหัวห่วง อ่านสบายตอนตัวโต) ---------- */
body[data-skin="pastel"] { font-size: 16.5px; }
body[data-skin="pastel"] .page-title { font-size: 34px; }
body[data-skin="pastel"] .page-sub { font-size: 16px; }
body[data-skin="pastel"] .box-head span { font-size: 23px; }
body[data-skin="pastel"] .box-head small { font-size: 13.5px; }
body[data-skin="pastel"] .box-note { font-size: 13.5px; }
body[data-skin="pastel"] .orb-val { font-size: 34px; }
body[data-skin="pastel"] .orb-top,
body[data-skin="pastel"] .orb-label { font-size: 16px; }
body[data-skin="pastel"] .orb-sub { font-size: 12px; }
body[data-skin="pastel"] .orb-state { font-size: 21px; }
body[data-skin="pastel"] .qlink-text strong { font-size: 16px; }
body[data-skin="pastel"] .qlink-text small { font-size: 11px; }
body[data-skin="pastel"] .newsrow { font-size: 15.5px; }
body[data-skin="pastel"] .newstag { font-size: 12px; }
body[data-skin="pastel"] .newsdate { font-size: 13px; }
/* base.css กำหนดสี label เป็นฟ้าจางไว้สำหรับพื้นมืด — พื้นขาวต้องทับเอง */
body[data-skin="pastel"] .field label { font-size: 13.5px; color: var(--c-primary-deep); }
body[data-skin="pastel"] .input { font-size: 16px; }
body[data-skin="pastel"] .btn { font-size: 16px; }
body[data-skin="pastel"] .footer-inner { font-size: 13px; }

/* ---------- ฟอร์ม / ปุ่ม / การ์ด ---------- */
body[data-skin="pastel"] .card,
body[data-skin="pastel"] .auth-card {
    background: #fff;
    border: 1px solid var(--c-border);
    box-shadow: var(--c-shadow);
    backdrop-filter: none;
}
body[data-skin="pastel"] .input,
body[data-skin="pastel"] select.input,
body[data-skin="pastel"] textarea.input {
    background: #fff;
    border: 1px solid var(--c-border);
    color: var(--c-text);
}
body[data-skin="pastel"] .input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-dim); }
body[data-skin="pastel"] .btn-primary {
    background: linear-gradient(180deg, var(--c-primary-glow), var(--c-primary));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(29, 127, 208, .28);
}
body[data-skin="pastel"] .btn-primary:hover:not(:disabled) {
    background: var(--c-primary-deep);
    box-shadow: 0 6px 14px rgba(29, 127, 208, .34);
}
body[data-skin="pastel"] .btn-primary:active:not(:disabled) {
    box-shadow: 0 2px 6px rgba(29, 127, 208, .3);
}
body[data-skin="pastel"] .btn-ghost {
    background: #fff;
    border: 1px solid var(--c-border);
    color: var(--c-text);
}
body[data-skin="pastel"] .btn-ghost:hover:not(:disabled) { background: var(--c-bg-hover); border-color: var(--c-primary); }
body[data-skin="pastel"] .page-title { color: var(--c-primary-deep); text-shadow: none; }
body[data-skin="pastel"] .page-sub { color: var(--c-text-soft); }

/* ---------- ท้องฟ้า: ฟ้าสว่างแทนกลางคืน ---------- */
body[data-skin="pastel"] .sky { background: transparent; }
body[data-skin="pastel"] .sky-stars { display: none; }
body[data-skin="pastel"] .sky-cloud-1 { background: rgba(255, 255, 255, .8); }
body[data-skin="pastel"] .sky-cloud-2 { background: rgba(190, 228, 255, .7); }
/* ขาวใต้แถบเมนูแล้วไล่ลงไปเป็นสีพื้นหน้า คลิปจึงไม่มีรอยต่อทั้งบนและล่าง */
body[data-skin="pastel"] .sky-window { background: linear-gradient(180deg, #fff 0 62%, var(--c-bg) 100%); }
/* ขอบล่างและมุมซ้ายล่างของคลิปเฟดจนกลืนพื้นขาว (ไม่ใช้ลิ่มทับ — ขอบคมแล้วดูเป็นสติกเกอร์) */
body[data-skin="pastel"] .sky-video {
    -webkit-mask-image:
        linear-gradient(180deg, #000 62%, rgba(0, 0, 0, .35) 88%, transparent 100%),
        linear-gradient(108deg, transparent 4%, rgba(0, 0, 0, .3) 15%, #000 34%);
    mask-image:
        linear-gradient(180deg, #000 62%, rgba(0, 0, 0, .35) 88%, transparent 100%),
        linear-gradient(108deg, transparent 4%, rgba(0, 0, 0, .3) 15%, #000 34%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
body[data-skin="pastel"] .sound-btn { background: rgba(255, 255, 255, .8); border-color: var(--c-border); color: var(--c-text); }

/* ---------- วงกลมสถิติ: ฟ้าทึบ ขอบประขาว ---------- */
body[data-skin="pastel"] .orb {
    background: linear-gradient(180deg, var(--c-primary-glow), var(--c-primary));
    border: none;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55), 0 8px 18px rgba(29, 58, 92, .18);
    color: #fff;
}
body[data-skin="pastel"] .orb::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, .75);
    pointer-events: none;
}
body[data-skin="pastel"] .orb { position: relative; }
body[data-skin="pastel"] .orb-val { color: #fff; text-shadow: 0 2px 4px rgba(29, 58, 92, .35); }
body[data-skin="pastel"] .orb-top,
body[data-skin="pastel"] .orb-label { color: #fff; }
body[data-skin="pastel"] .orb-sub { color: rgba(255, 255, 255, .85); }
body[data-skin="pastel"] .orb-mark .rail-icon { color: #fff; }
body[data-skin="pastel"] .orb-state { color: #fff; }
body[data-skin="pastel"] .orb-status { background: linear-gradient(180deg, #a9dcff, #6fc0f7); }
body[data-skin="pastel"] .orb-status.is-down { background: linear-gradient(180deg, #ffb3bd, #ef5a6f); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55); }

/* ---------- กล่องล็อกอิน / ข่าว / แบนเนอร์ ---------- */
body[data-skin="pastel"] .loginbox,
body[data-skin="pastel"] .newsbox,
body[data-skin="pastel"] .promo {
    background: #fff;
    border: 1px solid var(--c-border);
    box-shadow: var(--c-shadow);
}
body[data-skin="pastel"] .box-head span { color: var(--c-primary-deep); }
body[data-skin="pastel"] .box-note { background: var(--c-bg-elev); border-color: var(--c-border); }
body[data-skin="pastel"] .box-note strong { color: var(--c-gold-deep); }
body[data-skin="pastel"] .promo-dot { background: var(--c-border); }
body[data-skin="pastel"] .promo-dot.is-on,
body[data-skin="pastel"] .promo-dot:hover { background: var(--c-primary); }

/* ---------- ลิงก์ด่วน: กล่องขาวไล่เทา แบบปุ่มเมนูเว็บเซิร์ฟ ---------- */
body[data-skin="pastel"] .qlink {
    background: linear-gradient(180deg, #ffffff, #eef6fd);
    border: 1px solid var(--c-border);
    box-shadow: 0 2px 6px rgba(29, 58, 92, .08);
}
body[data-skin="pastel"] .qlink:hover { background: linear-gradient(180deg, #ffffff, var(--c-bg-hover)); border-color: var(--c-primary); }
body[data-skin="pastel"] .qlink-icon { background: var(--c-sky-dim); color: var(--c-primary-deep); }
body[data-skin="pastel"] .qlink-text strong { color: var(--c-text); }

/* ---------- ข่าว: ป้ายหมวดสี่เหลี่ยมเขียว/ส้ม ---------- */
body[data-skin="pastel"] .newsrow { border-bottom: 1px dashed var(--c-divider); }
body[data-skin="pastel"] .newstag {
    border-radius: 4px;
    background: var(--c-success);
    color: #fff;
}
body[data-skin="pastel"] .newsrow:nth-child(even) .newstag { background: var(--c-warning); }
body[data-skin="pastel"] a.newstitle:hover { color: var(--c-primary-deep); }
body[data-skin="pastel"] .newsdate { color: var(--c-text-dim); }

/* ---------- สมาชิก / footer ---------- */
body[data-skin="pastel"] .mb-profile,
body[data-skin="pastel"] .mb-tile,
body[data-skin="pastel"] .tcard {
    background: #fff;
    border: 1px solid var(--c-border);
    box-shadow: var(--c-shadow);
}
body[data-skin="pastel"] .mb-avatar { background: var(--c-primary); border: none; color: #fff; }

body[data-skin="pastel"] .footer {
    border-top: 3px solid var(--c-primary);
    background: #fff;
}
body[data-skin="pastel"] .footer-inner { color: var(--c-text-soft); }
body[data-skin="pastel"] .footer-links a:hover { color: var(--c-primary-deep); }