* { box-sizing: border-box; }

:root {
  --ink: #0d1b2e;
  --ink-soft: #243447;
  --ink-muted: #3d4f63;
  --glass: rgba(255, 250, 245, 0.28);
  --glass-strong: rgba(255, 252, 248, 0.42);
  --glass-soft: rgba(255, 255, 255, 0.22);
  --glass-input: rgba(255, 255, 255, 0.28);
  --glass-input-focus: rgba(255, 255, 255, 0.48);
  --glass-dark: rgba(8, 22, 42, 0.42);
  --line: rgba(255, 255, 255, 0.55);
  --line-soft: rgba(255, 255, 255, 0.32);
  --glow: 0 12px 40px rgba(12, 16, 28, 0.28), 0 0 28px rgba(255, 170, 70, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --glow-soft: 0 8px 28px rgba(12, 16, 28, 0.2);
  --accent: #0a7ad1;
  --accent-hover: #0864ad;
  --danger: #c62828;
  --radius: 18px;
  --radius-sm: 12px;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, Arial, Helvetica, sans-serif;
  margin: 0;
  min-height: 100vh;
  padding: 20px;
  background: #002147 url('FacultyWebAppBackGround.png') no-repeat center center fixed;
  background-size: cover;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35);
}

.screen { max-width: 1200px; margin: 0 auto; }

.card {
  background: var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--glow);
  padding: 26px;
}

.auth-card { max-width: 480px; margin: 48px auto; }

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.form-header h2 {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.form-header-logo { height: 72px; flex-shrink: 0; }

.hint {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 14px;
  line-height: 1.5;
}

.account-note {
  font-size: 13px;
  color: #4a3600;
  background: rgba(255, 236, 179, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 220, 140, 0.55);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 0 0 16px;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(90, 60, 0, 0.08);
}

.muted { color: rgba(255, 245, 230, 0.82); font-size: 12px; display: block; margin-top: 2px; }
.card .muted,
.modal-card .muted { color: var(--ink-muted); }

.error { color: #9b1028; font-size: 13px; margin: 8px 0; font-weight: 600; }
.sublabel { margin-top: 0 !important; font-weight: 500 !important; color: var(--ink-soft) !important; font-size: 13px; }

.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab {
  flex: 1;
  margin: 0;
  background: var(--glass-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}
.tab.active {
  background: rgba(10, 122, 209, 0.88);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 16px rgba(10, 122, 209, 0.28);
}

label {
  display: block;
  margin-top: 14px;
  font-weight: 600;
  color: var(--ink);
}

.email-label { color: var(--ink); }

input, textarea, select {
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  background: var(--glass-input);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 8px rgba(12, 16, 28, 0.06);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  text-shadow: none;
}

input::placeholder,
textarea::placeholder {
  color: #6b7a8c;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgba(10, 122, 209, 0.65);
  background: var(--glass-input-focus);
  box-shadow: 0 0 0 3px rgba(10, 122, 209, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

button {
  margin-top: 16px;
  padding: 12px 16px;
  width: 100%;
  background: linear-gradient(180deg, #1a8ee0 0%, var(--accent) 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 11px;
  box-shadow: 0 6px 18px rgba(10, 122, 209, 0.28);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
button:hover {
  background: linear-gradient(180deg, #167fc9 0%, var(--accent-hover) 100%);
  box-shadow: 0 8px 22px rgba(8, 100, 173, 0.34);
}
button:active { transform: translateY(1px); }
button:disabled {
  background: rgba(140, 148, 158, 0.55);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  width: auto;
  margin-top: 0;
  padding: 8px 14px;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 4px 14px rgba(8, 20, 40, 0.16);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.34);
  box-shadow: 0 6px 16px rgba(8, 20, 40, 0.2);
}

.card .btn-secondary,
.modal-card .btn-secondary,
.article-nav .btn-secondary,
.form-actions .btn-secondary {
  background: rgba(36, 52, 71, 0.55);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}
.card .btn-secondary:hover,
.modal-card .btn-secondary:hover,
.article-nav .btn-secondary:hover,
.form-actions .btn-secondary:hover {
  background: rgba(36, 52, 71, 0.72);
}

.btn-accent {
  background: linear-gradient(180deg, #ff8a3d 0%, #e65100 100%);
  margin-top: 0;
  margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(230, 81, 0, 0.32);
}
.btn-accent:hover {
  background: linear-gradient(180deg, #f57a28 0%, #bf360c 100%);
  box-shadow: 0 8px 22px rgba(191, 54, 12, 0.36);
}

.btn-danger {
  background: linear-gradient(180deg, #e04848 0%, var(--danger) 100%);
  width: auto;
  margin-top: 0;
  padding: 10px 14px;
  box-shadow: 0 6px 16px rgba(198, 40, 40, 0.28);
}
.btn-danger:hover {
  background: linear-gradient(180deg, #c62828 0%, #8e0000 100%);
}

.btn-inline {
  width: auto;
  margin-top: 0;
  padding: 10px 14px;
  background: linear-gradient(180deg, #2a8fd4 0%, #106ebe 100%);
}
.muted-btn {
  background: rgba(108, 117, 125, 0.78) !important;
  box-shadow: none !important;
}
.muted-btn:hover { background: rgba(90, 98, 106, 0.9) !important; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  color: #fff;
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: var(--glow-soft), 0 0 24px rgba(255, 160, 60, 0.08);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

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

.panel-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 860px) {
  .panel-layout { grid-template-columns: 1fr; }
}

.sidebar h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.article-list {
  max-height: 70vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article-item {
  text-align: left;
  width: 100%;
  margin: 0;
  padding: 12px 12px;
  background: rgba(255, 255, 255, 0.36);
  color: var(--ink);
  border: 1px solid var(--line-soft);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 3px 12px rgba(18, 24, 40, 0.08);
}
.article-item:hover {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 5px 16px rgba(18, 24, 40, 0.12);
}
.article-item.active {
  background: linear-gradient(180deg, #1a8ee0 0%, var(--accent) 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 18px rgba(10, 122, 209, 0.3);
}
.article-item small { display: block; opacity: 0.85; margin-top: 4px; font-weight: 500; }

.pdf-section {
  margin-top: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.pdf-hint { margin: 0 0 10px; font-size: 13px; color: var(--ink-muted); font-weight: normal; }
.pdf-upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.pdf-status { margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.pdf-status.error { color: #9b1028; }

.cover-preview {
  margin-top: 10px;
  max-width: 180px;
}
.cover-preview img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: var(--glow-soft);
}

.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 560px) {
  .field-pair { grid-template-columns: 1fr; }
  body { padding: 12px; }
  .card { padding: 18px; }
  .form-footer-logo {
    height: 42px;
    max-width: min(180px, 80%);
    padding: 4px 8px;
  }
}

input[readonly], textarea[readonly] {
  background: rgba(232, 236, 242, 0.55);
  color: #3a4654;
  cursor: default;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin-top: 10px;
}
.form-actions button {
  width: auto;
  flex: 1 1 140px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.25;
  min-height: 48px;
  height: 48px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.article-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.36);
}
.article-nav .btn-secondary { flex: 0 0 auto; }
.record-pos {
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  flex: 1;
  white-space: nowrap;
}
.article-nav-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.form-panel-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 16px;
  padding: 14px 12px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.36);
}

.form-panel-footer img {
  display: block;
  width: 92px;
  height: auto;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 4px 14px rgba(8, 16, 32, 0.16);
}

.form-panel-footer p {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  line-height: 1.35;
}

.brand-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 18px;
  padding: 14px 8px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.brand-footer img {
  display: block;
  width: 92px;
  height: auto;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 4px 14px rgba(8, 16, 32, 0.28);
}

.brand-footer p {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  line-height: 1.35;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 16, 32, 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}
.modal[hidden] { display: none !important; }
.modal-card {
  width: min(520px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--glass-strong);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-head h3 { margin: 0; color: var(--ink); font-weight: 700; }
.icon-close {
  width: auto;
  margin: 0;
  padding: 4px 10px;
  background: transparent;
  color: var(--danger);
  font-size: 28px;
  line-height: 1;
  border: none;
  box-shadow: none;
}
.icon-close:hover {
  background: rgba(198, 40, 40, 0.1);
  box-shadow: none;
}