@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg:#07111d;
  --panel:#0d2136;
  --panel2:#102941;
  --line:rgba(126,190,245,.18);
  --text:#f5f9fd;
  --muted:#91a8bd;
  --blue:#2b9cff;
  --red:#b94a51;
}

* { box-sizing:border-box; }

body {
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 82% 10%,rgba(33,144,242,.15),transparent 30rem),
    linear-gradient(145deg,#050c15,#08182a 48%,#06111d);
}

.admin-shell {
  width:min(1180px,calc(100% - 30px));
  margin:0 auto;
  padding:22px 0 40px;
}

.admin-header {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:25px;
  align-items:center;
  margin-bottom:24px;
}

.brand img {
  display:block;
  width:auto;
  height:70px;
  max-width:280px;
}

.eyebrow {
  margin:0 0 6px;
  color:#56b7ff;
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.15em;
}

h1,h2 { margin-top:0; }
h1 { margin-bottom:0; font-size:2rem; letter-spacing:-.04em; }
h2 { margin-bottom:15px; letter-spacing:-.035em; }

.back-link {
  color:#cde9ff;
  text-decoration:none;
  font-size:.79rem;
  font-weight:800;
}

.panel {
  padding:24px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(13,33,54,.82);
  box-shadow:0 18px 50px rgba(0,0,0,.25);
}

.login-panel {
  width:min(520px,100%);
  margin:70px auto 0;
}

.hidden { display:none !important; }

label {
  display:grid;
  gap:7px;
  margin-bottom:14px;
  color:#b9c9d8;
  font-size:.78rem;
  font-weight:700;
}

input,select,textarea {
  width:100%;
  border:1px solid rgba(133,190,239,.25);
  border-radius:10px;
  outline:0;
  background:#081a2b;
  color:white;
  padding:10px 11px;
  font:inherit;
}

input[type=file] {
  border-style:dashed;
  padding:14px;
}

textarea { resize:vertical; }

.button {
  border:1px solid rgba(129,191,245,.28);
  border-radius:10px;
  padding:9px 13px;
  background:#102a43;
  color:white;
  font:inherit;
  font-size:.79rem;
  font-weight:800;
  cursor:pointer;
}

.button.primary {
  border-color:#168ae6;
  background:linear-gradient(135deg,#0788ef,#1560bd);
}

.button.danger {
  border-color:rgba(211,83,91,.40);
  background:#612d33;
}

.button.small {
  padding:6px 9px;
  font-size:.72rem;
}

.toolbar {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.toolbar h2 { margin-bottom:0; }

.toolbar-actions {
  display:flex;
  gap:8px;
}

.admin-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.rights-check {
  grid-template-columns:auto 1fr;
  align-items:start;
}

.rights-check input {
  width:auto;
  margin-top:3px;
}

.progress {
  height:9px;
  margin-top:15px;
  overflow:hidden;
  border-radius:20px;
  background:#06111d;
}

.progress > div {
  width:0;
  height:100%;
  background:linear-gradient(90deg,#168ce8,#55c5ff);
  transition:width .12s linear;
}

.message {
  min-height:1.1em;
  margin:12px 0 0;
  color:#9db2c5;
  font-size:.78rem;
  font-weight:700;
}

.message.success { color:#74d99b; }
.message.error { color:#ff898f; }

.album-form {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-bottom:15px;
}

.album-form input { margin:0; }

.album-manager {
  display:grid;
  gap:8px;
}

.album-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(130,189,239,.13);
  border-radius:11px;
  background:rgba(7,24,41,.52);
}

.album-row strong { display:block; }
.album-row span { color:#8198ad; font-size:.72rem; }

.album-actions {
  display:flex;
  gap:6px;
}

.library-panel { margin-top:18px; }

.library-header {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:15px;
}

.library-header h2 { margin-bottom:0; }
.library-header input { max-width:270px; }

.photo-admin-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.photo-admin-card {
  overflow:hidden;
  border:1px solid rgba(129,190,242,.14);
  border-radius:15px;
  background:#091c2e;
}

.photo-admin-card img {
  display:block;
  width:100%;
  height:180px;
  object-fit:cover;
  background:#06111d;
}

.photo-admin-info {
  padding:12px;
}

.photo-admin-info strong {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.photo-admin-info p {
  min-height:2.3em;
  margin:5px 0;
  color:#879eb2;
  font-size:.73rem;
  line-height:1.45;
}

.photo-admin-meta {
  color:#58b6f8;
  font-size:.69rem;
  font-weight:800;
}

.photo-actions {
  display:flex;
  gap:6px;
  margin-top:11px;
  flex-wrap:wrap;
}

.server-note { margin-top:18px; }
.server-note p:last-child { color:#9db2c5; line-height:1.55; }

code {
  padding:2px 5px;
  border-radius:5px;
  background:#06111d;
  color:#9ed5ff;
}

.modal {
  position:fixed;
  z-index:2000;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(2,8,14,.88);
  backdrop-filter:blur(12px);
}

.modal-card {
  width:min(560px,100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  padding:23px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#0c2034;
  box-shadow:0 30px 80px rgba(0,0,0,.50);
}

.modal-head {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:start;
}

.edit-preview {
  display:block;
  width:100%;
  max-height:300px;
  object-fit:contain;
  margin:0 0 18px;
  border-radius:12px;
  background:#06111d;
}

@media(max-width:800px) {
  .admin-header { grid-template-columns:1fr; align-items:start; }
  .back-link { justify-self:start; }
  .admin-grid { grid-template-columns:1fr; }
  .photo-admin-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:520px) {
  .admin-shell { width:min(100% - 18px,1180px); }
  .toolbar,.library-header { align-items:flex-start; flex-direction:column; }
  .library-header input { max-width:none; }
  .photo-admin-list { grid-template-columns:1fr; }
}