:root{--ink:#2f2c46;--muted:#6b6784;--rose:#f391a9;--rose-deep:#e2528a;--navy:#4b4a67;--cyan:#82ebfd;--line:#f0cfda;--bg:#fff6f9}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 85% 10%,#fec8d466 0,#fec8d400 30%),radial-gradient(circle at 10% 90%,#82ebfd33 0,#82ebfd00 32%),var(--bg);color:var(--ink);font:14px/1.6 -apple-system,BlinkMacSystemFont,"Thonburi",Tahoma,sans-serif}
.page{max-width:680px;margin:0 auto;padding:28px 18px 60px}
.hero{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
h1{font-size:22px;margin:0}
.tag{margin:0;color:var(--muted);font-size:13px;flex:1}
.status{margin:0 0 14px;padding:10px 14px;border-radius:12px;background:#fff0f7d9;border:1px solid #f2cfe0;font-size:13px}
.card{background:#ffffffcc;border:1px solid #fff;border-radius:18px;padding:16px 18px;margin:0 0 14px;box-shadow:0 8px 24px #e0338a12}
.card h2{font-size:15px;margin:0 0 6px}.card h3{font-size:14px;margin:12px 0 6px}
.big{font-size:26px;color:var(--rose-deep);margin-left:6px}
.hint{color:var(--muted);font-size:12.5px;margin:0 0 10px}
label{display:block;font-size:13px;font-weight:600;margin:10px 0 6px}
input{display:block;width:100%;font:inherit;font-weight:400;margin-top:6px;padding:10px 12px;border:1px solid #e9c6d9;border-radius:12px;background:#fff;color:var(--ink)}
input:focus{outline:none;border-color:var(--rose-deep);box-shadow:0 0 0 3px #ff5fa22e}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
button{font:inherit;font-weight:600;border-radius:999px;padding:9px 16px;border:1px solid transparent;cursor:pointer;min-height:38px}
button.primary{background:linear-gradient(115deg,#ff6fb0,#e0338a 58%,#b04ad9);color:#0b0810;box-shadow:0 5px 12px #e0338a38}
button.ghost{background:transparent;border-color:var(--line);color:var(--muted)}
button:disabled{opacity:.5;cursor:wait}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:8px}
.pack{padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:center;cursor:pointer}
.pack strong{display:block;font-size:16px}.pack small{color:var(--muted)}
.pack:hover{border-color:var(--rose)}
.qr{display:flex;justify-content:center;padding:12px;background:#fff;border-radius:14px;border:1px solid var(--line);margin:8px 0}
.qr svg{width:220px;height:220px}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.list li:first-child{border-top:0}
.list .muted{color:var(--muted)}
.row{display:flex;gap:8px;align-items:center;margin:0 0 10px;font-size:13px}.row input{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:10px}.row .small{font:inherit;font-size:12px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:13px}.table th,.table td{text-align:left;padding:8px 6px;border-top:1px solid var(--line);white-space:nowrap}.table th{color:var(--muted);font-weight:600;border-top:0}.table .num{text-align:right;font-variant-numeric:tabular-nums}.table tr.me td{background:#fff6f9}
.danger{border-color:#f5d4dc}
/* น้องเก้า character CI */
.hero{display:flex;align-items:center;gap:14px}.hero-art{height:96px;width:auto;flex:none;filter:drop-shadow(0 6px 10px #4b4a6733)}.hero h1{margin:0}.card{border:1.5px solid #4b4a6733;box-shadow:2px 2px 0 #4b4a6722}
/* image library */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:10px}
.tile{display:flex;flex-direction:column;gap:6px;background:#fff;border:1.5px solid #4b4a6733;border-radius:14px;padding:8px;box-shadow:2px 2px 0 #4b4a6722}
.tile img{width:100%;height:120px;object-fit:cover;border-radius:10px;background:#f4eef2}
.tile .cap{margin:0;font-size:12px;line-height:1.45}
.tile .small{font-size:11px;margin:0}
.tile .warn{color:#a33c24}
.tile select,.tile input{font:inherit;font-size:12px;padding:6px 8px;border:1px solid #e9dbe3;border-radius:10px;background:#fff}
.tile button{align-self:flex-start}
#library-files{font:inherit;font-size:13px}