:root {
--bg:oklch(0.15 0.075 301);
--bg-dark:oklch(0.1 0.075 301);
--bg-light:oklch(0.2 0.075 301);
--border:oklch(0.4 0.15 301);
--border-muted:oklch(0.3 0.15 301);
--danger:oklch(0.7 0.15 30);
--highlight:oklch(0.5 0.15 301);
--info:oklch(0.8 0.15 260);
--primary:oklch(0.76 0.15 301);
--secondary:oklch(.65 0.13 240);
--success:oklch(0.7 0.15 160);
--text:oklch(0.96 0.1 301);
--text-muted:oklch(0.76 0.1 301);
--warning:oklch(0.7 0.15 100)
}
body { background-color:var(--bg); font-family:sans-serif; margin:0; padding:0 }
h2 { margin:0 }
.navbar { background-color:var(--bg-light); overflow:hidden; width:100% }
.navbar a { align-content:center; color:var(--text); float:left; font-size:17px; height:34px;
  overflow:hidden; padding:0; text-align:center; text-decoration:none; width:20% }
.navbar a.active { background-color:var(--bg-dark); color:var(--text-muted) }
@media screen and (max-width: 500px) { 
  .navbar a { display:block; float:none; text-align:left; width:100% }}
#container { display:flex; gap:2rem; padding:1rem }
#admin-center-stats { color:var(--text) }
#text-panel { background:var(--highlight); border:1px solid var(--border-muted); border-radius:.5rem; color:var(--text);
  font-family:monospace; padding:1rem; white-space:pre-wrap; width:60% }
#image-gallery { display:flex; flex-wrap:wrap; gap:1rem; width:40% }
.gallery-img { border:1px solid var(--border); border-radius:.5rem; max-height:400px; max-width:100% }
#about { background:var(--highlight); border-radius:.5rem; color:var(--text); font-family:monospace; margin:15px; padding:1rem; white-space:pre-wrap }
.dropdown { float:right; overflow:hidden }
.dropdown .dropbtn { background-color:inherit; border:none; color:var(--text); font-family:inherit; font-size:16px;
  height:34px; margin:0; outline:none; width:40px }
.navbar a:hover,.dropdown:hover .dropbtn { background-color:var(--highlight) }
.dropdown-content { background-color:var(--bg); box-shadow:0 8px 16px 0 var(--border); display:none; position:absolute; right:6px; width:100px; z-index:1 }
.dropdown-content a { background-color:var(--bg-light); color:var(--text); display:block; float:left; padding-right:6px;
  text-align:right; text-decoration:none; width:100% }
.dropdown-content a:hover { background-color:var(--highlight); border-width:1px }
.dropdown:hover .dropdown-content { display:block }
.hidden { display: none; }
.comp-modal { position: fixed; inset: 0; z-index: 1000; }
.comp-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.comp-modal-card { position: relative; margin: 5vh auto; max-width: 900px; background: #111; color: #eee; border-radius: 12px; padding: 12px; }
.comp-modal-head { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #333; padding:8px 12px; }
.comp-modal-body { padding: 12px; }
.comp-close { font-size: 20px; line-height: 1; background: transparent; color: #eee; border: 0; cursor: pointer; }
.comp-actions { display:flex; gap: 8px; margin-bottom: 10px; }
.comp-table-wrap { max-height: 60vh; overflow:auto; border:1px solid #333; border-radius: 8px; }
.comp-table { width: 100%; border-collapse: collapse; }
.comp-table th, .comp-table td { border-bottom:1px solid #222; padding: 8px; }
.comp-table input[type="text"] { width: 100%; }
.comp-msg { margin-top: 8px; min-height: 20px; }
.comp-bad { color: #ff6b6b; }
.comp-ok { color: #63e6be; }
.messages-feed {  display: grid;  place-items: center;  margin: 24px 0 56px; }
.msg {  width: 80vw;  max-width: 1400px;  max-height: 265px;  display: grid;  grid-template-columns: minmax(240px, 30%) 1fr;
  grid-template-rows: auto 1fr;  column-gap: 16px;  background: rgba(0,0,0,0.25);  border: 2px solid var(--primary);
  border-radius: 14px;  overflow: hidden;  box-shadow: 0 10px 30px rgba(0,0,0,0.25);  margin: 14px 0; }
.msg.type-info   { border-color: var(--primary); }
.msg.type-warn   { border-color: var(--warning); }
.msg.type-alert  { border-color: var(--danger);  }
.msg__media { grid-row: 1 / span 2; grid-column: 1 / 2; position: relative; display: grid; place-items: center;
  background: rgba(255,255,255,0.03); border-right: 2px solid currentColor; }
.msg.type-info  .msg__media { color: var(--primary); }
.msg.type-warn  .msg__media { color: var(--warning); }
.msg.type-alert .msg__media { color: var(--danger);  }
.msg__img {  width: 100%;  height: 100%;  object-fit: fill;  border-left: 0;  border-right: 0;  border-top: 0;  border-bottom: 0; }
.msg__title {  grid-column: 2 / 3;  grid-row: 1 / 2;  display: flex;  align-items: center;  gap: 12px;
  padding: 14px 16px 0 0;  color: var(--text);  font-weight: 700;  font-size: 1.05rem; }
.msg__title::before { content: ""; width: 10px; height: 10px; border-radius: 999px; margin-top: 2px; background: var(--primary); }
.msg.type-warn  .msg__title::before { background: var(--warning); }
.msg.type-alert .msg__title::before { background: var(--danger);  }
.msg__time { font-weight: 600; opacity: 0.8; font-size: 0.95rem; }
.msg__titletext { font-weight: 800; font-size: 1.05rem; }
.msg__bodylink { grid-column: 2 / 3; grid-row: 2 / 3; padding: 6px 16px 16px 0; text-decoration: none; color: var(--text);
  display: block; height: 100%; }
.msg__body { font-size: 0.98rem; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  -webkit-line-clamp: 10; line-clamp: 10; }
.msg__body.fallback-ellipsis { white-space: nowrap; text-overflow: ellipsis; }
.msg.no-image { grid-template-columns: 1fr; }
.msg.no-image .msg__media { display: none; }