/* EduApp AI blog — shared styles */

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

:root{
  --bg:#07090D;
  --surface:#10151D;
  --surface-2:#161D27;
  --border:#1E2733;
  --border-strong:#2A3644;
  --text:#F4F6F8;
  --text-secondary:#8A97A3;
  --text-muted:#5C6773;
  --accent:#2FD9A8;
  --accent-dark:#0E4636;
  --accent-2:#4EA8FF;
  --danger:#E2574C;
  --radius-lg:24px;
  --radius-md:14px;
  --radius-sm:8px;
  --font-sans:'Inter',Arial,Helvetica,sans-serif;
  --font-mono:'JetBrains Mono',Consolas,monospace;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}

body{
  background-image:
    radial-gradient(circle at 20% 0%, rgba(47,217,168,0.08) 0%, transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(78,168,255,0.05) 0%, transparent 40%);
  background-attachment:fixed;
  min-height:100vh;
}

a{color:inherit;text-decoration:none;}

/* ---------- layout shell ---------- */
.wrap{
  max-width:720px;
  margin:0 auto;
  padding:0 24px 120px;
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(7,9,13,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}

.topbar-inner{
  max-width:720px;
  margin:0 auto;
  padding:20px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-weight:700;
  font-size:20px;
  color:var(--accent);
  letter-spacing:0.2px;
}

.brand .cursor{
  display:inline-block;
  width:9px;
  height:20px;
  background:var(--accent);
  animation:blink 1s steps(1) infinite;
  vertical-align:-4px;
}

.brand-sub{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-muted);
  font-weight:400;
}

@keyframes blink{
  0%,49%{opacity:1;}
  50%,100%{opacity:0;}
}

.nav-link{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-secondary);
  border:1px solid var(--border-strong);
  padding:8px 16px;
  border-radius:20px;
  transition:border-color .15s ease, color .15s ease;
}
.nav-link:hover{
  color:var(--accent);
  border-color:var(--accent);
}

/* ---------- hero ---------- */
.page-hero{
  padding:56px 0 40px;
}
.page-hero .eyebrow{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--accent);
  margin:0 0 14px;
}
.page-hero h1{
  font-size:42px;
  line-height:1.15;
  font-weight:700;
  margin:0 0 12px;
}
.page-hero p{
  font-size:17px;
  color:var(--text-secondary);
  line-height:1.6;
  margin:0;
  max-width:520px;
}

/* ---------- post feed ---------- */
.feed{
  display:flex;
  flex-direction:column;
  gap:28px;
}

.post{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}

.post-image{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
  background:var(--surface-2);
}

.post-body{
  padding:26px 28px 22px;
}

.post-meta{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:10px;
}

.post-title{
  font-size:23px;
  font-weight:700;
  margin:0 0 10px;
  line-height:1.3;
}

.post-details{
  font-size:16px;
  color:var(--text-secondary);
  line-height:1.65;
  margin:0 0 20px;
  white-space:pre-wrap;
}

.post-actions{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:16px;
  border-top:1px solid var(--border);
}

.action-btn{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  color:var(--text-secondary);
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:600;
  padding:9px 16px;
  border-radius:20px;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, transform .1s ease;
}
.action-btn:hover{border-color:var(--border-strong);color:var(--text);}
.action-btn:active{transform:scale(0.96);}

.action-btn.liked{
  color:var(--accent);
  border-color:var(--accent);
  background:rgba(47,217,168,0.1);
}

.action-btn svg{width:17px;height:17px;flex:none;}

/* ---------- comments ---------- */
.comments{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--border);
  display:none;
}
.comments.open{display:block;}

.comment-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:16px;
}

.comment{
  display:flex;
  gap:12px;
}

.comment-avatar{
  flex:none;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  color:var(--accent);
}

.comment-body{flex:1;}

.comment-name{
  font-size:14px;
  font-weight:600;
  margin-right:8px;
}
.comment-time{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-muted);
}
.comment-text{
  font-size:14px;
  color:var(--text-secondary);
  line-height:1.5;
  margin-top:3px;
}

.comment-empty{
  font-size:14px;
  color:var(--text-muted);
  margin-bottom:16px;
}

.comment-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.comment-form-row{
  display:flex;
  gap:10px;
}

input, textarea{
  font-family:var(--font-sans);
  font-size:14px;
  color:var(--text);
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  outline:none;
  transition:border-color .15s ease;
  width:100%;
}
input:focus, textarea:focus{border-color:var(--accent);}
input::placeholder, textarea::placeholder{color:var(--text-muted);}
textarea{resize:vertical;min-height:70px;font-family:var(--font-sans);}

.btn{
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:600;
  padding:11px 20px;
  border-radius:var(--radius-sm);
  border:none;
  cursor:pointer;
  transition:opacity .15s ease, transform .1s ease;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--accent);color:#07090D;}
.btn-primary:hover{opacity:0.9;}
.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border-strong);}
.btn-ghost:hover{color:var(--text);border-color:var(--text-secondary);}
.btn-danger{background:transparent;color:var(--danger);border:1px solid rgba(226,87,76,0.4);}
.btn-danger:hover{background:rgba(226,87,76,0.1);}

.btn-row{display:flex;gap:10px;justify-content:flex-end;}

/* ---------- empty state ---------- */
.empty{
  padding:80px 20px;
  text-align:center;
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-lg);
  color:var(--text-muted);
}
.empty .glyph{
  font-family:var(--font-mono);
  font-size:32px;
  color:var(--accent);
  margin-bottom:14px;
}
.empty p{margin:0;font-size:15px;}

/* ---------- admin ---------- */
.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:30px 30px 28px;
  margin-bottom:32px;
}
.panel h2{
  font-size:19px;
  margin:0 0 6px;
  font-weight:700;
}
.panel .panel-sub{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-muted);
  margin:0 0 24px;
}

.field{margin-bottom:18px;}
.field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--text-secondary);
  margin-bottom:8px;
}
.field .hint{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-muted);
  margin-top:6px;
}

.dropzone{
  border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-md);
  padding:26px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
  position:relative;
}
.dropzone:hover{border-color:var(--accent);background:rgba(47,217,168,0.04);}
.dropzone input[type=file]{
  position:absolute;inset:0;opacity:0;cursor:pointer;
}
.dropzone .dz-label{
  font-size:14px;color:var(--text-secondary);
}
.dropzone .dz-label strong{color:var(--accent);}

.preview-wrap{margin-top:14px;position:relative;display:none;}
.preview-wrap.show{display:block;}
.preview-wrap img{
  width:100%;
  max-height:280px;
  object-fit:cover;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  display:block;
}
.preview-remove{
  position:absolute;top:10px;right:10px;
  background:rgba(7,9,13,0.85);
  border:1px solid var(--border-strong);
  color:var(--text);
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;line-height:1;
}

.status-msg{
  font-family:var(--font-mono);
  font-size:13px;
  padding:12px 16px;
  border-radius:var(--radius-sm);
  margin-bottom:20px;
  display:none;
}
.status-msg.show{display:block;}
.status-msg.ok{background:rgba(47,217,168,0.1);color:var(--accent);border:1px solid rgba(47,217,168,0.3);}
.status-msg.err{background:rgba(226,87,76,0.1);color:var(--danger);border:1px solid rgba(226,87,76,0.3);}

.admin-list{display:flex;flex-direction:column;gap:12px;}
.admin-row{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px 14px;
}
.admin-row .thumb{
  width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none;background:var(--surface);
  border:1px solid var(--border);
}
.admin-row .thumb-fallback{
  width:56px;height:56px;border-radius:10px;flex:none;background:var(--surface);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-family:var(--font-mono);font-size:11px;
}
.admin-row .info{flex:1;min-width:0;}
.admin-row .info .t{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.admin-row .info .m{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-top:2px;}

.storage-bar{
  height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin-top:10px;
  border:1px solid var(--border);
}
.storage-bar-fill{height:100%;background:var(--accent);width:0%;transition:width .2s ease;}

footer.credit{
  text-align:center;
  padding:40px 0 10px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-muted);
}

@media (max-width:640px){
  .page-hero h1{font-size:32px;}
  .post-body{padding:20px 20px 18px;}
  .panel{padding:22px;}
}
/* Admin Password Modal */
#admin-password {
  position: fixed;
  top: 10;
  left: 10;
  width: 40%;
  height: 20%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none; /* Hidden by default, shown via JS */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.innerdesign {
  background-color: var(--surface);
  padding: 20px;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Additional styling for the modal content */
.innerdesign p {
  margin-bottom: 10px;
  color: var(--text-primary, #333);
}

.innerdesign input {
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 15px;
  border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-sm, 4px);
  font-size: 16px;
}

.innerdesign button {
  background-color: var(--primary, #007bff);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  font-size: 16px;
}

.innerdesign button:hover {
  opacity: 0.9;
}

/* Close button (optional) */
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-secondary, #666);
}