/* Base */
body {
  margin: 0;
  padding: 0;
  background-color: #0d0d0d;
  color: #ccc;
  font-family: "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
  transition: 0.2s;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Layout wrapper */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1300px;
  margin: 0 auto;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  background-color: #1a1a1a;
}

/* Header */
.site-header {
  background: linear-gradient(to bottom, #333, #1a1a1a);
  padding: 15px 20px;
  border-bottom: 1px solid #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.site-subtitle {
  margin-left: 14px;
  font-size: 0.8rem;
  color: #888;
}

.header-right-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.sysver {
  font-family: monospace;
  color: #666;
  font-size: 0.75rem;
}

/* Social icons (mask) */
.social-links {
  display: flex;
  gap: 12px;
}

.social-icon {
  display: block;
  width: 18px;
  height: 18px;
  background-color: #fff;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0.7;
  transition: 0.2s;
}

.social-icon:hover {
  opacity: 1;
  transform: translateY(-2px);
  background-color: #ffcc00;
}

.icon-x {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.icon-discord {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E");
}

.icon-youtube {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.icon-niconico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 7h-5.2l3.1-3.6c.4-.4.4-1.1 0-1.5-.4-.4-1.1-.4-1.5 0L12 7 7.1 1.9c-.4-.4-1.1-.4-1.5 0-.4.4-.4 1.1 0 1.5L8.7 7H3.5C2.1 7 1 8.1 1 9.5v10C1 20.9 2.1 22 3.5 22H6L7.5 24L9 22H15L16.5 24L18 22H20.5c1.4 0 2.5-1.1 2.5-2.5v-10c0-1.4-1.1-2.5-2.5-2.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 7h-5.2l3.1-3.6c.4-.4.4-1.1 0-1.5-.4-.4-1.1-.4-1.5 0L12 7 7.1 1.9c-.4-.4-1.1-.4-1.5 0-.4.4-.4 1.1 0 1.5L8.7 7H3.5C2.1 7 1 8.1 1 9.5v10C1 20.9 2.1 22 3.5 22H6L7.5 24L9 22H15L16.5 24L18 22H20.5c1.4 0 2.5-1.1 2.5-2.5v-10c0-1.4-1.1-2.5-2.5-2.5z'/%3E%3C/svg%3E");
}

.icon-github {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
}

/* Top nav */
.global-nav {
  background-color: #252525;
  border-bottom: 2px solid #000;
  border-top: 1px solid #444;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
}

.nav-item-top {
  flex-grow: 1;
  text-align: center;
  border-right: 1px solid #333;
}

.nav-item-top:last-child {
  border-right: none;
}

.nav-link-top {
  display: block;
  padding: 12px 0;
  color: #aaa;
  font-weight: bold;
  font-size: 0.9rem;
}

.nav-link-top:hover {
  background-color: #333;
  color: #ffcc00;
}

/* 3 columns */
.main-container {
  display: flex;
  flex-grow: 1;
  align-items: stretch;
}

/* Sidebars */
.sidebar {
  width: 260px;
  background-color: #202020;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-left {
  border-right: 1px solid #333;
}

.sidebar-right {
  border-left: 1px solid #333;
}

/* Panel headers */
.panel-header {
  background: linear-gradient(to bottom, #444, #2a2a2a);
  padding: 10px;
  border-bottom: 2px solid #111;
  border-top: 1px solid #555;
  text-align: center;
  font-weight: bold;
  font-size: 0.9rem;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}

.panel-header--bottom {
  margin-top: auto;
}

.panel-header--donation {
  margin-top: 20px;
  background: linear-gradient(to bottom, #664400, #332200);
  color: #ffcc00;
}

.panel-header--admin {
  margin-top: 18px;
  background: linear-gradient(to bottom, #2d3a4a, #1c242f);
  color: #cfe5ff;
}

/* Sidebar menu */
.menu-item {
  border-bottom: 1px solid #333;
  background: #252525;
}

.menu-item a {
  display: block;
  padding: 12px 15px;
  color: #ccc;
  font-size: 0.85rem;
  transition: background 0.2s, padding-left 0.2s;
}

.menu-item a:hover {
  background: #333;
  color: #fff;
  padding-left: 20px;
  border-left: 4px solid #ffcc00;
}

/* Status rows */
.status-row {
  padding: 8px 15px;
  border-bottom: 1px solid #333;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
}

.label {
  color: #888;
}

.value {
  color: #eee;
  font-family: monospace;
}

.value--ok {
  color: #00ff00;
}

/* Action button */
.action-btn {
  display: block;
  margin: 15px;
  padding: 10px;
  background: linear-gradient(to bottom, #cc9900, #996600);
  color: #fff;
  text-align: center;
  border: 1px solid #ddaa00;
  border-radius: 4px;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.action-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Main content */
.main-content {
  flex-grow: 1;
  padding: 25px;
  background-color: #141414;
  min-width: 0;
}

.article-box {
  border: 1px solid #333;
  background: #1e1e1e;
  padding: 20px;
  margin-bottom: 25px;
}

.article-title {
  font-size: 1.2rem;
  color: #ffcc00;
  border-bottom: 1px solid #444;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.muted {
  color: #9a9a9a;
}

.news-list {
  padding-left: 20px;
  color: #ccc;
  list-style: disc;
}

.news-date {
  color: #666;
}

/* Owner box */
.owner-box {
  padding: 20px 15px;
  text-align: center;
  border-bottom: 1px solid #333;
}

.owner-img {
  width: 70px;
  height: 70px;
  background: #333;
  border: 1px solid #555;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-family: monospace;
}

.owner-name {
  font-weight: bold;
  color: #fff;
}

.owner-sub {
  font-size: 0.8rem;
  color: #888;
}

/* Donation box */
.donation-text {
  padding: 15px;
  font-size: 0.85rem;
  color: #ccc;
  line-height: 1.4;
}

.donation-note {
  font-size: 0.75rem;
  color: #666;
  margin-top: 5px;
}

.donation-footer {
  text-align: center;
  font-size: 0.75rem;
  color: #666;
  margin-bottom: 15px;
  border-bottom: 1px solid #333;
  padding-bottom: 15px;
}

.admin-box {
  padding: 12px 15px;
}

.link {
  color: #ffcc00;
}

/* Footer */
.site-footer {
  background: #111;
  text-align: center;
  padding: 10px;
  font-size: 0.7rem;
  color: #444;
  border-top: 1px solid #222;
}

/* Responsive */
@media (max-width: 900px) {
  .main-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    border: none;
    border-bottom: 2px solid #000;
  }

  .main-content {
    order: 1;
  }

  .sidebar-left {
    order: 2;
  }

  .sidebar-right {
    order: 3;
  }

  .nav-item-top {
    width: 50%;
    border-bottom: 1px solid #333;
  }
}