/* Shared theme for public list pages (matches index.php) */
:root { --pa: #4f46e5; --pb: #8b5cf6; --pc: #06b6d4; --psoft: rgba(99, 102, 241, .08); }
.tone-sky   { --pa: #0284c7; --pb: #4f46e5; --pc: #22d3ee; --psoft: rgba(14, 165, 233, .08); }
.tone-amber { --pa: #ea580c; --pb: #db2777; --pc: #f59e0b; --psoft: rgba(249, 115, 22, .08); }

html { scroll-behavior: smooth; }
body {
    font-family: 'IBM Plex Sans Thai', 'Sarabun', sans-serif !important;
    background-color: #f4f6fb !important;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(99, 102, 241, .07) 0, transparent 40%),
        radial-gradient(circle at 90% 60%, rgba(14, 165, 233, .07) 0, transparent 40%);
    background-attachment: fixed;
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
h1, h2, h3, th, button, .font-bold { font-family: 'Anuphan', 'IBM Plex Sans Thai', sans-serif; }

#ptProgress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 999;
    background: linear-gradient(90deg, #22d3ee, #6366f1, #a855f7, #ec4899); box-shadow: 0 0 10px rgba(99, 102, 241, .6); }

/* ---------- Hero ---------- */
.pt-hero { position: relative; overflow: hidden; color: #fff; padding: 3.6rem 1rem 3.6rem; margin-bottom: -2.4rem;
    border-bottom-left-radius: 2.5rem; border-bottom-right-radius: 2.5rem;
    background: linear-gradient(120deg, #1e1b4b, #312e81, #1d4ed8, #0369a1, #4c1d95);
    background-size: 300% 300%; animation: ptShift 18s ease infinite; }
.tone-sky.pt-hero { background-image: linear-gradient(120deg, #0c4a6e, #0369a1, #1d4ed8, #312e81, #0e7490); }
.tone-amber.pt-hero { background-image: linear-gradient(120deg, #7c2d12, #c2410c, #be185d, #9d174d, #b45309); }
@keyframes ptShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.pt-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.pt-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none; mix-blend-mode: screen; }
.pt-blob.b1 { width: 340px; height: 340px; background: var(--pc); top: -140px; left: -60px; animation: ptF1 16s ease-in-out infinite; }
.pt-blob.b2 { width: 380px; height: 380px; background: #ec4899; bottom: -200px; right: -80px; animation: ptF2 20s ease-in-out infinite; }
@keyframes ptF1 { 50% { transform: translate(120px, 60px) scale(1.15); } }
@keyframes ptF2 { 50% { transform: translate(-120px, -50px) scale(1.1); } }
.pt-hero-inner { position: relative; z-index: 2; max-width: 64rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
.pt-hero-text { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
@media (min-width: 640px) {
    .pt-hero { padding: 1.4rem 1.5rem 3.4rem; }
    .pt-hero-inner { flex-direction: row; justify-content: center; text-align: left; gap: 1rem; }
    .pt-hero-text { align-items: flex-start; gap: .4rem; }
    .pt-back { top: calc(50% - 1.2rem - 20px) !important; }
}
.pt-back { position: absolute; top: 1rem; left: 1rem; z-index: 5; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 999px;
    font-weight: 600; font-size: .9rem; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all .25s cubic-bezier(.2,.8,.2,1); }
.pt-back:hover { background: rgba(255,255,255,.26); transform: translateX(-3px); }
.pt-back svg { transition: transform .25s; } .pt-back:hover svg { transform: translateX(-3px); }
@media (min-width: 640px) { .pt-back { top: 1.5rem; left: 1.5rem; } }
.pt-logo { height: 56px; width: auto; background: #fff; padding: 4px; border-radius: 14px; animation: ptBob 5s ease-in-out infinite; flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(255,255,255,.15), 0 12px 28px rgba(0,0,0,.3); }
@keyframes ptBob { 50% { transform: translateY(-4px); } }
.pt-title { font-size: clamp(1.35rem, 3.2vw, 2rem); font-weight: 700; line-height: 1.25;
    background: linear-gradient(90deg, #fff 0%, #e0e7ff 25%, #fff 50%, #cffafe 75%, #fff 100%); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ptShine 6s linear infinite;
    filter: drop-shadow(0 4px 18px rgba(0,0,0,.25)); }
@keyframes ptShine { to { background-position: 200% center; } }
.pt-badges { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
@media (min-width: 640px) { .pt-badges { justify-content: flex-start; } }
.pt-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .8rem; border-radius: 999px; font-weight: 600; font-size: .82rem;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pt-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: ptPulse 2s infinite; }
@keyframes ptPulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.7); } 70% { box-shadow: 0 0 0 9px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }

/* ---------- Glass panels ---------- */
.pt-panel { position: relative; overflow: hidden; border-radius: 24px !important; background: rgba(255,255,255,.9) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(226,232,240,.9) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 24px 50px -30px rgba(15,23,42,.35) !important; }
.pt-panel.accent::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 1; background: linear-gradient(90deg, var(--pa), var(--pb), var(--pc)); }
.pt-panel.ok::before { background: linear-gradient(90deg, #10b981, #14b8a6, #22d3ee); }
.pt-panel.warn::before { background: linear-gradient(90deg, #f59e0b, #f97316, #fb7185); }

/* Search */
.pt-search input[type="text"] { height: 50px; padding-left: 2.8rem !important; border-radius: 14px !important; border: 1.5px solid #e2e8f0 !important; background: #f8fafc
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") no-repeat 14px center / 20px;
    transition: all .2s; font-size: .95rem; }
.pt-search input[type="text"]:focus { outline: none; background-color: #fff; border-color: var(--pa) !important; box-shadow: 0 0 0 4px var(--psoft) !important; }
.pt-search button[type="submit"] { position: relative; overflow: hidden; height: 50px; border-radius: 14px !important; padding: 0 1.6rem !important; color: #fff !important;
    background: linear-gradient(135deg, var(--pa), var(--pb)) !important; box-shadow: 0 12px 24px -12px var(--pa) !important; transition: transform .25s, box-shadow .25s !important; }
.pt-search button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -12px var(--pa) !important; }
.pt-search button[type="submit"]::after { content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: ptBtn 4.5s ease-in-out infinite; }
@keyframes ptBtn { 0%, 60% { left: -80%; } 100% { left: 130%; } }
.pt-search a { height: 50px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 14px !important; }
.pt-search.joined input[type="text"] { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.pt-search.joined button[type="submit"] { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* Card header */
.pt-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding: 1.1rem 1.4rem !important;
    background: linear-gradient(180deg, #f8faff, #fff) !important; border-bottom: 1px solid #eef2f7 !important; }
.pt-head h2 { color: #1e293b !important; display: flex; align-items: center; gap: .7rem; }
.pt-head h2 > svg { width: 42px !important; height: 42px !important; padding: 9px; border-radius: 13px; color: #fff !important; flex-shrink: 0;
    background: linear-gradient(135deg, var(--pa), var(--pb)); box-shadow: 0 10px 20px -10px var(--pa); margin: 0 !important; }
.ok .pt-head h2 > svg { background: linear-gradient(135deg, #10b981, #14b8a6); box-shadow: 0 10px 20px -10px #10b981; }
.warn .pt-head h2 > svg { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 10px 20px -10px #f59e0b; }
.pt-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; flex-shrink: 0;
    background: linear-gradient(135deg, var(--pa), var(--pb)); box-shadow: 0 10px 20px -10px var(--pa); }
.pt-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 700;
    background: #fff; border: 1px solid #e2e8f0; color: #334155; box-shadow: 0 4px 10px -8px rgba(15,23,42,.4); white-space: nowrap; }
.pt-chip b { font-family: 'Anuphan', sans-serif; color: var(--pa); }
.pt-chip.g b { color: #059669; } .pt-chip.b b { color: #2563eb; } .pt-chip.y b { color: #d97706; } .pt-chip.s b { color: #64748b; }
.pt-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Tables */
.pt-table thead tr { background: #fbfcfe !important; }
.pt-table thead th { color: #64748b !important; font-weight: 600; font-size: .82rem; letter-spacing: .01em; border-color: #f1f5f9 !important; }
.pt-table tbody tr { border-color: #f1f5f9 !important; transition: background-color .2s, box-shadow .2s; }
.pt-table tbody tr:nth-child(even) { background: #fbfcfe; }
.pt-table tbody tr:hover { background: #f5f7ff !important; box-shadow: inset 4px 0 0 var(--pa); }
.ok .pt-table tbody tr:hover { background: #f0fdf9 !important; box-shadow: inset 4px 0 0 #10b981; }
.warn .pt-table tbody tr:hover { background: #fffbeb !important; box-shadow: inset 4px 0 0 #f59e0b; }
.pt-table tbody td { border-color: #f1f5f9 !important; font-variant-numeric: tabular-nums; }
.pt-table tbody td:first-child { color: #94a3b8 !important; }
.pt-table .app-no { display: inline-block; font-family: 'Anuphan', sans-serif; font-weight: 700; color: var(--pa); background: var(--psoft);
    padding: .15rem .6rem; border-radius: 8px; letter-spacing: .02em; }
.pt-table mark { background: linear-gradient(120deg, #fde68a, #fcd34d); color: inherit; padding: 0 .15rem; border-radius: 4px; }
.pt-row-in { animation: ptRow .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ptRow { from { opacity: 0; transform: translateY(8px); } }
.pt-status-ok { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
    color: #fff; background: linear-gradient(135deg, #3b82f6, #6366f1); box-shadow: 0 6px 14px -8px #4f46e5; white-space: nowrap; }

/* Pagination */
.pt-pager a, .pt-pager span { border-radius: 10px !important; min-width: 2.4rem; text-align: center; transition: all .2s cubic-bezier(.2,.8,.2,1) !important; }
.pt-pager a:hover { transform: translateY(-2px); border-color: var(--pa) !important; color: var(--pa) !important; background: #fff !important; box-shadow: 0 8px 16px -10px var(--pa); }
.pt-pager a.pg-active, .pt-pager a[class*="bg-blue-600"], .pt-pager a[class*="bg-orange-500"] {
    color: #fff !important; border-color: transparent !important; background: linear-gradient(135deg, var(--pa), var(--pb)) !important; box-shadow: 0 8px 18px -8px var(--pa) !important; }

/* Back to top */
#ptTop { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--pa), var(--pb)); box-shadow: 0 10px 25px -5px var(--pa);
    opacity: 0; transform: translateY(20px) scale(.8); transition: all .35s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
#ptTop.show { opacity: 1; transform: none; pointer-events: auto; }

.pt-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.pt-reveal.in { opacity: 1; transform: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eef2ff; }
::-webkit-scrollbar-thumb { background: linear-gradient(#818cf8, #a78bfa); border-radius: 10px; border: 2px solid #eef2ff; }

/* Dark mode (shares the toggle saved by index.php) */
html.dark { color-scheme: dark; }
html.dark body { background-color: #0b1020 !important; color: #e2e8f0; }
html.dark .pt-panel { background: rgba(30,41,59,.88) !important; border-color: #334155 !important; }
html.dark .pt-head { background: linear-gradient(180deg, #1e293b, #172033) !important; border-color: #334155 !important; }
html.dark .pt-head h2, html.dark .text-gray-800, html.dark .text-gray-700 { color: #e2e8f0 !important; }
html.dark .pt-table thead tr { background: #172033 !important; }
html.dark .pt-table tbody tr:nth-child(even) { background: rgba(15,23,42,.35); }
html.dark .pt-table tbody tr:hover { background: rgba(99,102,241,.12) !important; }
html.dark .pt-table tbody td, html.dark .pt-table thead th { border-color: #334155 !important; }
html.dark .pt-chip, html.dark .pt-pager a { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; }
html.dark .pt-search input[type="text"] { background-color: #0f172a; border-color: #334155 !important; color: #e2e8f0; }
html.dark .bg-gray-50, html.dark .bg-white { background-color: transparent !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .pt-reveal { opacity: 1; transform: none; }
}