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

:root {
  --primary: #0b4c4c;
  --primary-light: #126b6b;
  --secondary: #d4af37;
  --secondary-hover: #c5a028;
  --accent: #f4e8c1;
  --text: #1e293b;
  --text-light: #64748b;
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --glass: rgba(255,255,255,.85);
  --shadow: 0 10px 40px -10px rgba(0,0,0,.1);
  --shadow-gold: 0 10px 40px -10px rgba(212,175,55,.3);
  --radius: 12px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body { font-family:'Inter',sans-serif; color:var(--text); line-height:1.6; background:var(--bg); overflow-x:hidden; }
h1,h2,h3,h4,.section-title { font-family:'Outfit',sans-serif; font-weight:700; }
section { padding:100px 10%; }
img { display:block; }

/* NAV */
.nav-container {
  position:fixed; top:25px; left:50%; transform:translateX(-50%);
  width:90%; max-width:1250px;
  background:rgba(11,76,76,.9); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);
  border:1px solid rgba(255,255,255,.1); border-radius:50px;
  padding:8px 30px; display:flex; justify-content:space-between; align-items:center;
  z-index:1000; box-shadow:0 15px 35px rgba(0,0,0,.2); transition:all .4s;
}
.nav-brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nav-brand span { font-size:1.2rem; font-weight:800; color:white; letter-spacing:-1px; white-space:nowrap; }
.nav-links { display:flex; gap:5px; flex-wrap:wrap; justify-content:center; align-items:center; }
.nav-hamburger { display:none; flex-direction:column; background:none; border:none; cursor:pointer; padding:5px; gap:4px; }
.nav-hamburger span { width:24px; height:2px; background:white; transition:all .3s; transform-origin:center; }
.nav-hamburger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.nav-mobile-header { display:flex; align-items:center; justify-content:space-between; }
.nav-item { text-decoration:none; color:rgba(255,255,255,.8); font-weight:600; font-size:.85rem; padding:10px 18px; border-radius:30px; transition:all .3s; border:1px solid transparent; white-space:nowrap; }
.nav-item:hover { background:var(--secondary); color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-gold); }
.nav-login { background:var(--secondary); color:white !important; }
.nav-login:hover { background:var(--secondary-hover); }
.nav-search-wrapper { position:relative; display:flex; align-items:center; }
.nav-search-input { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2); border-radius:30px; padding:10px 18px 10px 40px; color:white; font-size:.85rem; width:160px; transition:all .3s; outline:none; font-weight:500; }
.nav-search-input::placeholder { color:rgba(255,255,255,.6); }
.nav-search-input:focus { background:rgba(255,255,255,.25); border-color:var(--secondary); width:220px; }
.search-icon { position:absolute; left:15px; font-size:.9rem; pointer-events:none; opacity:.8; }

/* HERO */
.hero-section { height:100vh; background:linear-gradient(135deg,var(--primary) 0%,#063333 100%); display:flex; align-items:center; justify-content:center; text-align:center; color:white; position:relative; overflow:hidden; }
.hero-section::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 2px 2px,rgba(255,255,255,.05) 1px,transparent 0); background-size:40px 40px; }
.hero-box { background:rgba(255,255,255,.05); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.1); padding:60px; border-radius:40px; max-width:800px; width:90%; z-index:1; }
.hero-section h1 { font-size:4.5rem; margin-bottom:20px; background:linear-gradient(to right,#fff,var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1.1; }
.hero-section p { font-size:1.25rem; opacity:.9; max-width:600px; margin:0 auto; }

/* SECTIONS */
.section-title { font-size:2.8rem; margin-bottom:60px; color:var(--primary); position:relative; display:inline-block; }
.section-title::after { content:''; position:absolute; bottom:-15px; left:0; width:60px; height:5px; background:var(--secondary); border-radius:10px; }

/* PUBLICATIONS */
.publications-list { display:grid; gap:25px; }
.publication-item { background:var(--bg-soft); padding:30px; border-radius:var(--radius); display:flex; gap:30px; transition:all .4s; border-left:5px solid transparent; cursor:pointer; }
.publication-item:hover { background:white; transform:translateX(15px); box-shadow:var(--shadow); border-left-color:var(--secondary); }
.pub-number { font-family:'Outfit',sans-serif; font-size:2rem; font-weight:800; color:var(--accent); min-width:50px; }
.pub-content h3 { font-size:1.4rem; margin-bottom:10px; color:var(--primary); }
.pub-content p { color:var(--text-light); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ABOUT */
.about-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:80px; align-items:center; }
.about-image { width:100%; border-radius:30px; box-shadow:var(--shadow); }
.about-text { font-size:1.15rem; color:var(--text-light); margin-bottom:40px; text-align:justify; }
.contact-item-card { background:var(--bg-soft); padding:20px; border-radius:15px; margin-bottom:15px; display:flex; gap:15px; align-items:center; }

/* FOOTER */
.main-footer { background:#062626; color:white; padding:100px 10% 40px; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:60px; margin-bottom:80px; }
.footer-col h3 { color:var(--secondary); font-size:1.2rem; margin-bottom:30px; letter-spacing:1px; text-transform:uppercase; }
.visitor-card { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); padding:30px; border-radius:20px; text-align:center; }
.odometer { font-family:'Outfit',sans-serif; font-size:2.5rem; font-weight:800; letter-spacing:5px; color:var(--secondary); margin-bottom:20px; }
.stat-row { display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid rgba(255,255,255,.05); }
.footer-links a { display:block; color:rgba(255,255,255,.7); text-decoration:none; margin-bottom:15px; transition:all .3s; }
.footer-links a:hover { color:var(--secondary); transform:translateX(10px); }
.contact-item { display:flex; gap:15px; margin-bottom:20px; }
.contact-icon { color:var(--secondary); font-size:1.2rem; }
.bottom-bar { padding-top:40px; border-top:1px solid rgba(255,255,255,.05); text-align:center; }
.bottom-nav { display:flex; justify-content:center; gap:30px; margin-bottom:25px; flex-wrap:wrap; }
.bottom-nav a { color:rgba(255,255,255,.5); text-decoration:none; font-weight:500; transition:color .3s; }
.bottom-nav a:hover { color:white; }
.copyright { color:rgba(255,255,255,.3); font-size:.9rem; }

/* BUTTONS */
.btn { padding:12px 28px; border-radius:8px; font-weight:600; cursor:pointer; transition:all .3s; border:none; display:inline-flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; }
.btn-gold { background:var(--secondary); color:white; }
.btn-gold:hover { background:var(--secondary-hover); transform:translateY(-2px); }
.btn-outline { background:transparent; border:2px solid var(--primary); color:var(--primary); }

/* SEARCH OVERLAY */
.search-overlay { position:fixed; inset:0; background:rgba(255,255,255,.98); z-index:2000; overflow-y:auto; padding-top:120px; padding-bottom:100px; animation:fadeIn .3s ease-out; }
.search-results-wrap { max-width:1000px; margin:0 auto; padding:0 20px; }
.search-results-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:50px; border-bottom:2px solid var(--secondary); padding-bottom:20px; }
.search-results-header h2 { font-size:2.5rem; color:var(--primary); margin-bottom:5px; }

/* MODAL */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px; backdrop-filter:blur(15px); }
.modal-container { background:white; max-width:1300px; width:100%; max-height:98vh; border-radius:30px; overflow:hidden; display:flex; flex-direction:column; position:relative; box-shadow:0 30px 100px rgba(0,0,0,.5); }
.modal-close { position:absolute; top:25px; right:25px; background:var(--primary); color:white; border:none; width:45px; height:45px; border-radius:50%; font-size:1.8rem; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; transition:all .3s; line-height:1; }
.modal-close:hover { background:var(--secondary); transform:rotate(90deg); }
.modal-scroll-area { overflow-y:auto; }
.modal-preview-header { background:#f8f9fa; display:flex; justify-content:center; align-items:center; }
.modal-preview-header img,.modal-preview-header video { width:100%; max-height:70vh; object-fit:contain; }
.modal-preview-header iframe { width:100%; height:80vh; border:none; }
.no-preview { padding:60px; text-align:center; color:var(--text-light); }
.modal-content { padding:50px; }
.modal-category { color:var(--secondary); text-transform:uppercase; letter-spacing:3px; font-size:.85rem; font-weight:800; }
.modal-title { font-size:2.5rem; margin-top:15px; margin-bottom:25px; color:var(--primary); line-height:1.2; }
.modal-description { color:var(--text-light); font-size:1.2rem; line-height:1.9; white-space:pre-wrap; text-align:justify; }
.modal-attachment { margin-top:50px; padding:30px; background:var(--bg-soft); border-radius:20px; border:1px dashed var(--secondary); }
.attachment-header { color:var(--primary); margin-bottom:15px; display:flex; align-items:center; gap:10px; }
.attachment-info { color:var(--text-light); margin-bottom:20px; font-size:.9rem; }
.attachment-btn { text-decoration:none; border-radius:50px; }

/* SKELETON */
.skeleton { background:#e2e8f0; background-image:linear-gradient(90deg,#e2e8f0 0,#f8fafc 50%,#e2e8f0 100%); background-size:200% 100%; animation:shimmer 1.5s infinite linear; border-radius:8px; }
@keyframes shimmer { 0%{background-position:-100% 0} 100%{background-position:100% 0} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ADMIN */
.admin-root { background:#0f172a; color:#f8fafc; font-family:'Inter',sans-serif; font-size:14px; min-height:100vh; }
.admin-root *,.admin-root *::before,.admin-root *::after { box-sizing:border-box; }
.admin-root a { color:inherit; text-decoration:none; }
.admin-layout { display:flex; min-height:100vh; }
.sidebar { width:240px; background:#1e293b; border-right:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; flex-shrink:0; position:sticky; top:0; height:100vh; }
.sidebar-logo { padding:28px 24px; border-bottom:1px solid rgba(255,255,255,.06); }
.sidebar-logo .logo-title { font-size:1.4rem; font-weight:700; color:#38bdf8; letter-spacing:1px; }
.sidebar-logo small { display:block; font-size:.65rem; letter-spacing:1px; text-transform:uppercase; color:#94a3b8; margin-top:4px; }
.sidebar-nav { flex:1; padding:16px 0; }
.sidebar-link { display:flex; align-items:center; gap:12px; padding:13px 24px; color:#94a3b8; font-size:.85rem; transition:all .2s; cursor:pointer; border-left:3px solid transparent; text-decoration:none; }
.sidebar-link:hover,.sidebar-link.active { color:#f8fafc; background:rgba(56,189,248,.08); border-left-color:#38bdf8; }
.nav-icon { font-size:1rem; width:20px; text-align:center; }
.sidebar-footer { padding:20px 24px; border-top:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; gap:12px; }
.sidebar-footer a { color:#94a3b8; font-size:.8rem; display:flex; align-items:center; gap:8px; transition:color .2s; }
.sidebar-footer a:hover { color:#ef4444; }
.main-content { flex:1; overflow-y:auto; }
.topbar { background:#1e293b; border-bottom:1px solid rgba(255,255,255,.06); padding:0 32px; height:64px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
.topbar-left { display:flex; flex-direction:column; }
.topbar-left h2 { font-size:1rem; font-weight:700; margin:0; color:#fff; }
.breadcrumb { font-size:.65rem; color:#64748b; text-transform:capitalize; margin-bottom:2px; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.user-info { display:flex; flex-direction:column; text-align:right; }
.user-info strong { font-size:.85rem; color:#fff; }
.user-info span { font-size:.65rem; color:#64748b; }
.content-area { padding:32px; }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px; }
.stat-card { background:#1e293b; border:1px solid rgba(255,255,255,.06); padding:24px; border-radius:8px; border-top:3px solid #38bdf8; }
.stat-card .num { font-size:2.5rem; font-weight:800; color:#38bdf8; line-height:1; }
.stat-card .lbl { font-size:.75rem; letter-spacing:1px; text-transform:uppercase; color:#94a3b8; margin-top:8px; }
.a-card { background:#1e293b; border:1px solid rgba(255,255,255,.06); border-radius:8px; overflow:hidden; margin-bottom:24px; }
.a-card-header { padding:18px 24px; border-bottom:1px solid rgba(255,255,255,.06); display:flex; align-items:center; justify-content:space-between; }
.a-card-header h2 { font-size:.9rem; font-weight:600; letter-spacing:1px; margin:0; }
.admin-root table { width:100%; border-collapse:collapse; }
.admin-root th { padding:12px 16px; text-align:left; font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color:#94a3b8; border-bottom:1px solid rgba(255,255,255,.06); }
.admin-root td { padding:16px; border-bottom:1px solid rgba(255,255,255,.04); font-size:.9rem; vertical-align:middle; color:#e2e8f0; }
.admin-root tr:hover td { background:rgba(255,255,255,.02); }
.thumb { width:50px; height:50px; border-radius:8px; background:#0f172a; border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:1.2rem; overflow:hidden; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.tag { display:inline-block; padding:3px 10px; border-radius:2px; font-size:.7rem; letter-spacing:1px; text-transform:uppercase; }
.tag-gray { background:rgba(255,255,255,.06); color:#94a3b8; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group.full { grid-column:1 / -1; }
.admin-root label { font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color:#94a3b8; }
.admin-root input[type=text],.admin-root input[type=url],.admin-root input[type=email],.admin-root input[type=password],.admin-root input[type=file],.admin-root textarea,.admin-root select { background:#0f172a; border:1px solid rgba(255,255,255,.1); color:#f8fafc; padding:10px 14px; font-size:.85rem; border-radius:4px; outline:none; width:100%; font-family:'Inter',sans-serif; }
.admin-root input:focus,.admin-root textarea:focus,.admin-root select:focus { border-color:#38bdf8; }
.admin-root textarea { resize:vertical; min-height:100px; }
.checkbox-row { display:flex; align-items:center; gap:10px; font-size:.85rem; color:#cbd5e1; cursor:pointer; }
.admin-root input[type=checkbox] { width:16px; height:16px; accent-color:#38bdf8; }
.abtn { display:inline-flex; align-items:center; gap:6px; padding:9px 20px; font-size:.75rem; letter-spacing:1px; text-transform:uppercase; font-weight:600; border-radius:4px; cursor:pointer; border:none; transition:all .2s; font-family:'Inter',sans-serif; text-decoration:none; }
.abtn-blue { background:#38bdf8; color:#0f172a; }
.abtn-blue:hover { background:#7dd3fc; }
.abtn-outline { background:transparent; color:#cbd5e1; border:1px solid rgba(255,255,255,.15); }
.abtn-outline:hover { border-color:#38bdf8; color:#38bdf8; }
.abtn-danger { background:rgba(239,68,68,.15); color:#ef4444; border:1px solid rgba(239,68,68,.3); }
.abtn-danger:hover { background:rgba(239,68,68,.25); }
.abtn-sm { padding:6px 14px; font-size:.7rem; }
.alert { padding:12px 18px; border-radius:4px; margin-bottom:20px; font-size:.85rem; }
.alert-success { background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); color:#22c55e; }
.alert-error { background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.4); color:#ef4444; }
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#0f172a; }
.login-box { background:#1e293b; border:1px solid rgba(56,189,248,.2); padding:50px 40px; width:100%; max-width:400px; border-radius:8px; box-shadow:0 10px 25px rgba(0,0,0,.5); }
.login-logo { font-size:2rem; font-weight:700; color:#38bdf8; text-align:center; margin-bottom:8px; letter-spacing:1px; }
.login-sub { text-align:center; color:#94a3b8; font-size:.85rem; margin-bottom:36px; }

/* RESPONSIVE */
@media (max-width:1024px) { section{padding:80px 7%} .hero-section h1{font-size:3.8rem} .nav-container{width:92%;padding:8px 25px} }
@media (max-width:768px) {
  section{padding:60px 5%} .hero-section h1{font-size:3rem} .hero-box{padding:30px 20px;border-radius:24px;width:92%}
  .nav-container{top:0;left:0;transform:none;width:100%;border-radius:0;padding:12px 20px;flex-direction:column;align-items:stretch;gap:0;max-height:70px;overflow:hidden;border-left:none;border-right:none;border-top:none}
  .nav-container.open{max-height:100vh;overflow-y:auto}
  .nav-mobile-header{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:56px}
  .nav-hamburger{display:flex;width:40px;height:40px;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border-radius:50%}
  .nav-links{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:15px 0 25px;border-top:1px solid rgba(255,255,255,.1);margin-top:10px;opacity:0;transform:translateY(-10px);transition:all .3s;pointer-events:none}
  .nav-container.open .nav-links{opacity:1;transform:translateY(0);pointer-events:all}
  .nav-item{padding:12px 20px;font-size:.95rem;width:100%;text-align:center;border-radius:15px}
  .nav-search-wrapper{width:100%;max-width:320px;margin-top:10px}
  .nav-search-input{width:100% !important;text-align:center;padding:12px 18px}
  .search-icon{display:none}
  .publication-item{padding:20px;gap:20px;flex-direction:column}
  .pub-number{font-size:1.5rem;min-width:auto}
  .footer-grid{gap:40px;margin-bottom:50px}
  .main-footer{padding:60px 5% 30px}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .modal-overlay{padding:10px}
  .modal-container{border-radius:20px;max-height:95vh}
  .modal-content{padding:30px 20px}
  .modal-title{font-size:1.8rem}
  .modal-description{font-size:1rem;line-height:1.6}
  .modal-close{top:15px;right:15px;width:35px;height:35px;font-size:1.4rem}
  .stats-row{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .form-group.full{grid-column:auto}
  .sidebar{display:none}
}
@media (max-width:480px) { .hero-section h1{font-size:2.4rem} .stats-row{grid-template-columns:1fr} }