/**************************************************
 * База
 **************************************************/
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;background:#ffffff;color:#333}

/* Контент */
.content{padding:2rem;max-width:1200px;margin:0 auto}

/* Приветственный блок */
.welcome{
  background:#f8f9fa;padding:2rem;border-radius:8px;margin-bottom:2rem;border:1px solid #e9ecef
}

/* Карточки фич */
.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
  row-gap:24px;
}
.feature-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  padding:16px;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.feature-card h3{margin:0 0 6px 0;color:#495057}
.feature-card p{margin:0 0 12px 0;color:#6c757d}
.feature-card .card-actions{margin-top:auto}

/* Полная ширина для определённых карточек */
.features .feature-card.full-width,
.features .feature-card.past-energo-card{
  grid-column:1/-1;
}

/* Кнопки */
.btn{
  display:inline-block;
  width:100%;
  text-align:center;
  padding:10px 16px;
  background:#2b6cb0;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  border:0;
  cursor:pointer;
  line-height:1.2;
  transition:filter .2s;
}
.btn:hover{filter:brightness(1.05)}
.btn.primary{background:#2b6cb0}

/* Аплоад стиль */
.upload-form{
  background:#f8f9fa;padding:2rem;border-radius:8px;border:1px solid #e9ecef;margin-bottom:2rem
}
.form-group{margin-bottom:1rem}

/* Сообщения */
.message{padding:1rem;margin:1rem 0;border-radius:4px}
.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}

/* Таблица файлов */
.files-container{
  background:#f8f9fa;padding:2rem;border-radius:8px;border:1px solid #e9ecef
}
.files-table{width:100%;border-collapse:collapse;margin-top:1rem}
.files-table th,.files-table td{padding:0.75rem;text-align:left;border-bottom:1px solid #dee2e6}
.files-table th{background:#e9ecef;font-weight:bold;color:#495057}
.files-table tr:hover{background:#ffffff}
.file-size,.file-date{color:#6c757d;font-size:.9em}

/* Кнопки действий */
.delete-btn{
  background:#dc3545;color:#fff;border:none;padding:.25rem .5rem;border-radius:3px;
  cursor:pointer;font-size:.8em
}
.delete-btn:hover{background:#c82333}
.download-btn{
  background:#28a745;color:#fff;border:none;padding:.25rem .5rem;border-radius:3px;
  cursor:pointer;font-size:.8em;text-decoration:none;display:inline-block;margin-right:.5rem
}
.download-btn:hover{background:#218838}

/* --- System Tools (cards/grid) --- */
.tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.25rem;
  margin-top:2rem
}
.tool-card{
  background:#f8f9fa;
  padding:1.25rem;
  border-radius:10px;
  border:1px solid #e9ecef;
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .25s ease,box-shadow .25s ease;
  max-width:100%;
  -webkit-tap-highlight-color:transparent
}
.tool-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,0.08)
}
@media (hover:none) and (pointer:coarse){
  .tool-card:active{
    transform:translateY(0);
    box-shadow:0 0 0 3px rgba(0,123,255,0.15) inset
  }
}
.tool-icon{font-size:2rem;margin-bottom:.75rem}
.tool-card h3{font-size:1.1rem;margin-bottom:.5rem;color:#495057}
.tool-card p{color:#6c757d;line-height:1.45;margin-bottom:1rem;flex-grow:1}
.tool-card-footer{margin-top:auto}
.status-container{margin-bottom:.75rem}
.status-indicator{
  display:inline-block;
  width:9px;height:9px;
  border-radius:50%;
  margin-right:.5rem
}
.status-online{background:#28a745}
.status-offline{background:#dc3545}
.status-unknown{background:#ffc107}

.tool-btn{
  display:inline-block;
  width:100%;
  text-align:center;
  padding:.75rem 1rem;
  background:#6c757d;
  color:#fff;
  text-decoration:none;
  border-radius:6px;
  border:none;
  cursor:pointer;
  font-size:.95rem;
  transition:background-color .3s
}
.tool-btn:hover{background:#5a6268}
.tool-btn.primary{background:#007bff}
.tool-btn.primary:hover{background:#0056b3}
.tool-btn.warning{background:#ffc107;color:#212529}
.tool-btn.warning:hover{background:#e0a800}
.tool-btn.danger{background:#dc3545}
.tool-btn.danger:hover{background:#c82333}

/* Quick Access */
.quick-access{
  margin-top:2rem;
  padding:1rem;
  background:#e6f7ff;
  border-radius:8px;
  font-size:.95rem
}
.quick-links{
  display:flex;
  flex-direction:column;
  gap:.6rem
}
.quick-item{
  display:flex;
  justify-content:space-between;
  align-items:center
}
.quick-item .label{
  font-weight:600;
  color:#333;
  white-space:nowrap;
  flex-shrink:0;
  margin-right:1rem
}
.link-wrapper{
  display:flex;
  align-items:center;
  gap:.4rem;
  width:60%;
  max-width:500px;
  flex-shrink:0
}
.link-input{
  flex:1;
  padding:.45rem .8rem;
  border:1px solid #b3e0ff;
  border-radius:6px;
  background:white;
  font-family:monospace;
  font-size:.92rem;
  color:#1e90ff;
  cursor:text;
  user-select:text;
  min-width:0
}
.link-input:focus{
  outline:2px solid #1890ff;
  outline-offset:-1px
}
.copy-btn{
  background:transparent;
  border:none;
  font-size:1.1rem;
  cursor:pointer;
  padding:.4rem;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s;
  flex-shrink:0
}
.copy-btn:hover{
  background:rgba(24,144,255,.1);
  transform:scale(1.1)
}
.copy-btn:active{
  background:rgba(24,144,255,.2)
}

/* --- Адаптив --- */
@media (max-width:380px){
  .tools-grid{grid-template-columns:1fr;gap:1rem}
  .tool-card{padding:1rem;border-radius:8px}
  .tool-icon{font-size:1.75rem}
  .tool-card h3{font-size:1rem}
  .tool-card p{font-size:.95rem}
}
@media (min-width:381px) and (max-width:480px){
  .tools-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}
@media (min-width:768px){
  .tools-grid{gap:1.5rem}
  .tool-card{padding:1.5rem}
  .tool-icon{font-size:2.25rem}
}
@media (prefers-reduced-motion:reduce){
  .tool-card,.tool-card:hover{transition:none;transform:none;box-shadow:none}
}
@media (max-width:520px){
  .features{grid-template-columns:1fr}
}

/**************************************************
 * Server Info (info.php)
 **************************************************/
.system-overview{
  max-width:1000px;
  margin:0 auto;
  padding:20px;
  background:#f8f9fa;
  border-radius:10px;
}
.system-overview > h1{
  color:#2c3e50;
  text-align:center;
  border-bottom:3px solid #3498db;
  padding-bottom:10px;
}
.hypervisor-section,
.hardware-section,
.vm-structure-section,
.storage-section,
.features-section{
  background:#fff;
  padding:20px;
  margin:20px 0;
  border-radius:8px;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
}
.hypervisor-section h2,
.hardware-section h2,
.vm-structure-section h2,
.storage-section h2,
.features-section h2{
  color:#e74c3c;
}
.proxmox-features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:15px;
  margin-top:15px;
}
.proxmox-features > div{
  text-align:center;
  padding:15px;
  background:#e3f2fd;
  border-radius:6px;
}
.proxmox-features > div > div{font-size:24px}
.hardware-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:15px;
  margin-top:15px;
}
.hw-item{
  background:#ecf0f1;
  padding:15px;
  border-radius:6px;
}
.hw-item h3{color:#2c3e50;margin:0 0 10px 0}
.vm-tree{
  margin:20px 0;
  background:#f8f9fa;
  padding:20px;
  border-radius:8px;
  border-left:4px solid #3498db;
  font-family:monospace;
  line-height:1.8;
}
.vm-details{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:15px;
  margin-top:20px;
}
.vm-details > div{
  background:#e8f6f3;
  padding:15px;
  border-radius:6px;
  border-left:4px solid #1abc9c;
}
.vm-details > div h4{color:#16a085;margin:0 0 10px 0}
.storage-visual{text-align:center;margin:20px 0}
.storage-visual > div{
  display:inline-block;
  background:#3498db;
  color:#fff;
  padding:10px 20px;
  border-radius:20px;
  font-weight:bold;
}
.zfs-pools{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
}
.pool{
  background:#e8f6f3;
  padding:15px;
  border-radius:8px;
  border-left:4px solid #1abc9c;
}
.pool h3{color:#16a085;margin:0 0 10px 0}
.features-list{margin-top:15px}
.features-list > div{
  display:flex;
  align-items:center;
  margin:10px 0;
  padding:10px;
  background:#d5f4e6;
  border-radius:5px;
}
.features-list > div > span{font-size:24px;margin-right:15px}
.conclusion{
  text-align:center;
  background:#2c3e50;
  color:#fff;
  padding:20px;
  border-radius:8px;
  margin-top:20px;
}
.conclusion h2{margin:0 0 10px 0}
.conclusion p{margin:0;font-size:18px}