:root { color-scheme: dark; }
* { box-sizing: border-box; }

body {
  margin: 0;
  background: #0a0a0a;
  color: #eaeaea;
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", sans-serif;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 24px 16px 72px; }
.wrap.narrow { max-width: 420px; padding-top: 72px; }

h1 { font-size: 20px; margin: 0 0 2px; }
.sub { color: #8a8a8a; font-size: 13px; }
.dim { color: #5a5a5a; }

.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 20px; }

/* ---- ตัวเลขสรุป ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 20px; }
.stat { background: #141414; border: 1px solid #262626; border-radius: 12px; padding: 14px 16px; }
.stat b { display: block; font-size: 22px; line-height: 1.2; }
.stat span { font-size: 12px; color: #8a8a8a; }

.card { background: #141414; border: 1px solid #262626; border-radius: 12px; padding: 18px; margin-bottom: 18px; }

/* ---- ฟอร์ม ---- */
label { display: block; font-size: 13px; color: #a5a5a5; margin-bottom: 6px; }
input[type=text], input[type=password], select, textarea {
  padding: 9px 12px; border-radius: 8px; border: 1px solid #333;
  background: #0d0d0d; color: #eee; font-size: 14px; font-family: inherit;
}
input[type=text], input[type=password] { min-width: 180px; }
.wrap.narrow input { width: 100%; }

.btn {
  display: inline-block; padding: 9px 16px; border-radius: 999px; border: 0;
  background: #e11d48; color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none; font-family: inherit;
}
.btn.ghost { background: #282828; color: #ddd; font-weight: 500; }
.btn.danger { background: #7f1d1d; }
.btn:disabled { opacity: .5; cursor: default; }

.row { display: flex; align-items: center; }
.row.between { justify-content: space-between; }
.row.gap { gap: 8px; }
.wrapline { flex-wrap: wrap; }

.err { background: #3f1d1d; border: 1px solid #7f1d1d; color: #fca5a5;
       padding: 10px 12px; border-radius: 8px; margin: 12px 0; font-size: 14px; }

/* ---- โฟลเดอร์ ---- */
.crumb a { color: #9ca3af; text-decoration: none; }
.crumb span { color: #4a4a4a; margin: 0 6px; }
.folders { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.folder { display: flex; align-items: center; background: #0f0f0f; border: 1px solid #2a2a2a; border-radius: 10px; }
.folder.on { border-color: #e11d48; }
.folder a { padding: 8px 10px; color: #ddd; text-decoration: none; font-size: 14px; }
.folder i { color: #777; font-style: normal; font-size: 12px; }
.folder .x { background: none; border: 0; color: #666; cursor: pointer; padding: 8px 10px; font-size: 16px; }
.folder .x:hover { color: #f87171; }

/* ---- อัปโหลด ---- */
.drop { border: 2px dashed #333; border-radius: 12px; padding: 28px 16px; text-align: center; color: #8a8a8a; cursor: pointer; }
.drop.over { border-color: #e11d48; color: #eee; }
.bar { height: 6px; background: #262626; border-radius: 999px; overflow: hidden; margin: 12px 0 8px; }
.bar > i { display: block; height: 100%; width: 0; background: #e11d48; transition: width .2s; }

/* ---- ตาราง ---- */
.bulk { margin: 14px 0; padding-bottom: 14px; border-bottom: 1px solid #222; }
.chk { display: flex; align-items: center; gap: 6px; margin: 0; color: #ddd; font-size: 14px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid #1f1f1f; vertical-align: middle; }
th { color: #7a7a7a; font-weight: 500; font-size: 12px; white-space: nowrap; }
td.title { font-weight: 500; }
td.empty { color: #5a5a5a; padding: 20px 8px; }
.link { font-family: ui-monospace, monospace; font-size: 11px; color: #7a7a7a; word-break: break-all; max-width: 260px; }

.ok { color: #34d399; font-size: 12px; }
.warn { color: #fbbf24; font-size: 12px; }

.livedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
           background: #ef4444; margin-right: 5px; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

.actions { white-space: nowrap; }
.mini { display: inline-block; background: #262626; color: #ddd; border: 0; border-radius: 6px;
        padding: 4px 9px; margin-right: 4px; cursor: pointer; text-decoration: none; font-size: 13px; }
.mini:hover { background: #333; }

/* ---- กล่องคัดลอกลิงก์ ---- */
#modal { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: flex;
         align-items: center; justify-content: center; padding: 16px; z-index: 50; }
#modal[hidden] { display: none; }
#modal .box { background: #141414; border: 1px solid #2c2c2c; border-radius: 12px;
              padding: 18px; width: 100%; max-width: 720px; }
#embedList { width: 100%; height: 300px; margin: 12px 0; resize: vertical;
             font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.6; }

/* ---- จอเล็ก ---- */
@media (max-width: 720px) {
  .link { display: none; }
  th:nth-child(9), td:nth-child(9) { display: none; }
  .stat b { font-size: 18px; }
}