/* =====================================================
   FRUTIGER AERO BLOG — style.css
   ★ EDIT GUIDE:
     Colors    → :root variables below
     Fonts     → body { font-family: ... }
     Max width → .site { max-width: ... }
     BG        → body { background: ... }
===================================================== */
:root {
  --glass: rgba(210,242,255,0.55);
  --border-glass: rgba(255,255,255,0.78);
  --text-dark: #0e3858;
  --text-mid: #1e6080;
  --text-light: #4898b8;
  --white: #ffffff;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  min-height: 100vh;
  font-family: MS Gothic, Tahoma, 'Trebuchet MS', Arial, sans-serif;
  font-size: 12px;
  background:
    linear-gradient(160deg, #cceeff 0%, #b8e8f8 25%, #c0f0e0 55%, #b8d8ff 100%);
  background-image: url("https://mirrorglass.neocities.org/asadal_stock_1.jpg");
  background-repeat: no-repeat;
  background-size: auto;
  background-size: 1400px;
  overflow-x: hidden;
  color: var(--text-dark);
}

/* Site wrapper */
.site { max-width:920px;margin:0 auto;position:relative;z-index:10;display:flex;flex-direction:column;min-height:100vh; }

/* ======== HEADER ======== */
header { background:linear-gradient(180deg,rgba(180,232,255,.97) 0%,rgba(120,196,248,.98) 45%,rgba(64,158,230,.99) 100%);border-bottom:2px solid rgba(255,255,255,.5);box-shadow:0 4px 20px rgba(40,120,200,.25),inset 0 1px 0 rgba(255,255,255,.7);position:relative;overflow:hidden; }
header::after { content:'';position:absolute;top:0;left:0;right:0;height:48%;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);pointer-events:none; }

.hdr-main { padding:18px 20px 14px;display:flex;align-items:center;gap:18px;position:relative;z-index:2; }

.hdr-text { flex:1; }
.site-name { font-size:26px;font-weight:bold;color:#fff;text-shadow:0 2px 0 rgba(0,80,180,.3),0 0 20px rgba(160,220,255,.6),1px 1px 0 rgba(0,60,140,.2);letter-spacing:1px;margin-bottom:4px; }

/* Nav */
nav { background:linear-gradient(180deg,rgba(100,185,248,.98),rgba(50,140,215,.99));border-top:1px solid rgba(255,255,255,.3);padding:0 16px;display:flex;gap:2px;align-items:flex-end; }
.nav-tab { padding:7px 16px 11px;font-size:9px;font-weight:bold;color:rgba(255,255,255,.8);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);border-bottom:none;border-radius:7px 7px 0 0;cursor:pointer;text-decoration:none;transition:all .12s;display:flex;align-items:center;gap:5px;text-shadow:0 1px 2px rgba(0,50,120,.4); }
.nav-tab.active { background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.25));color:var(--text-dark);text-shadow:none;border-color:rgba(255,255,255,.5); }
.nav-tab:hover:not(.active) { background:rgba(255,255,255,.2);color:#fff; }
 
@media (max-width: 680px) {
  .body-wrap { grid-template-columns: 1fr; }
  .site-name { font-size: 20px; }

  nav {
    display: flex !important;
  }

  .nav-tab {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .nav-tab span + text, 
  .nav-tab {
    line-height: 1.6 !important; 
  }
}

/* Breadcrumb */
.breadcrumb { background:linear-gradient(180deg,rgba(220,244,255,.92),rgba(195,232,255,.92));border-bottom:1px solid rgba(160,215,248,.5);padding:5px 16px;font-size:10.5px;color:var(--text-light);display:flex;align-items:center;gap:5px; }
.bc-globe { width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.5);flex-shrink:0; }

/* Body layout */
.body-wrap { flex:1;display:grid;grid-template-columns:1fr 250px;gap:12px;padding:14px;align-items:start; }

/* ======== GLASS PANEL ======== */
.glass { background:linear-gradient(145deg,rgba(230,248,255,.72) 0%,rgba(210,240,255,.68) 60%,rgba(220,252,244,.65) 100%);border:1px solid var(--border-glass);border-radius:10px;box-shadow:0 6px 24px rgba(40,120,200,.14),0 1px 4px rgba(40,120,200,.08),inset 0 1px 0 rgba(255,255,255,.82);backdrop-filter:blur(10px);overflow:hidden; }

.glass-header { background:linear-gradient(180deg,rgba(100,190,248,.88) 0%,rgba(50,150,225,.92) 100%);padding:6px 12px;display:flex;align-items:center;gap:7px;border-bottom:1px solid rgba(255,255,255,.4);position:relative; }
.glass-header::after { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent);pointer-events:none; }
.gh-title { font-size:11px;font-weight:bold;color:white;text-shadow:0 1px 2px rgba(0,60,140,.4);letter-spacing:.5px;flex:1; }
.gh-count { font-size:10px;color:rgba(255,255,255,.7); }

/* Tabs */
.tab-pane { display:none; }
.tab-pane.active { display:flex;flex-direction:column;gap:12px; }

/* Main col */
.main-col { display:flex;flex-direction:column;gap:12px; }

/* Posts */
.post { transition:transform .15s; }
.post:hover { transform:translateY(-2px); }
.post-inner { padding:14px 16px 12px; }

.post-meta { display:flex;align-items:center;gap:7px;margin-bottom:8px;flex-wrap:wrap; }

/* Post thumbnail */
.post-title { font-size:14px;font-weight:bold;color:var(--text-dark);margin-bottom:6px;text-shadow:0 1px 0 rgba(255,255,255,.7);line-height:1.4; }
.post-title a { color:inherit;text-decoration:none; }
.post-title a:hover { color:var(--sky3); }
.post-excerpt { font-size:11.5px;color:var(--text-mid);line-height:1.65;margin-bottom:10px; }
.post-footer { display:flex;justify-content:space-between;align-items:center; }

/* Pagination */
.pagination { display:flex;justify-content:center;gap:5px;padding:12px; }
.page-btn { padding-top:2px;padding-left: 2px; width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;text-decoration:none;border:1px solid rgba(255,255,255,.5);position:relative;overflow:hidden;transition:all .12s;box-shadow:0 2px 6px rgba(40,120,200,.18); }
.page-btn::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.4),transparent); }
.page-btn.active { background:linear-gradient(180deg,#80c8f8,#2888d8);color:white;border-color:rgba(255,255,255,.4); }
.page-btn:not(.active) { background:linear-gradient(180deg,rgba(220,245,255,.8),rgba(190,230,255,.7));color:var(--text-mid); }
.page-btn:hover:not(.active) { background:rgba(255,255,255,.9); }

/* ======== ABOUT TAB ======== */
.about-hero { width:100%;height:110px;border-radius:8px;background:linear-gradient(135deg,#b8f0e8,#80d8f0);border:1px solid rgba(255,255,255,.7);margin-bottom:10px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 3px 10px rgba(40,120,200,.15); }
.about-hero::after { content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);pointer-events:none; }
.about-hero .icon-img { width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1; }
.about-hero .icon-fallback { font-size:50px;display:none;position:relative;z-index:1; }
.about-text { font-size:12px;color:var(--text-mid);line-height:1.7;margin-bottom:10px; }
.about-facts { list-style:none;display:flex;flex-direction:column;gap:5px; }
.about-facts li { font-size:11.5px;color:var(--text-mid);padding:5px 8px;background:rgba(255,255,255,.4);border:1px solid rgba(160,210,245,.3);border-radius:7px;display:flex;align-items:center;gap:7px; }

/* ======== ART TAB ======== */
.art-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:7px; }
.art-item { aspect-ratio:1;border-radius:8px;border:2px solid rgba(255,255,255,.7);box-shadow:0 3px 8px rgba(80,160,200,.2),inset 0 1px 0 rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--sky1),var(--aqua1)); }
.art-item:nth-child(2){background:linear-gradient(135deg,#c8f0d0,#90e0f8)}
.art-item:nth-child(3){background:linear-gradient(135deg,#d8c8f8,#a8d8ff)}
.art-item:nth-child(4){background:linear-gradient(135deg,#f8d8c8,#f0b8e8)}
.art-item:nth-child(5){background:linear-gradient(135deg,#d8f8c8,#b8e8ff)}
.art-item:nth-child(6){background:linear-gradient(135deg,#f8f0c8,#c8f0e0)}
.art-item::before { content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);pointer-events:none;z-index:2; }
.art-item:hover { transform:scale(1.05);box-shadow:0 6px 16px rgba(80,160,200,.35); }
.art-item .icon-img { width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1; }
.art-item .icon-fallback { font-size:28px;display:none;position:relative;z-index:1; }

/* ======== DIARY TAB ======== */
.diary-post { padding:12px 14px; }
.diary-title { font-size:14px;font-weight:bold;color:var(--text-dark);margin-bottom:6px;line-height:1.4; }
.diary-title a { color:inherit;text-decoration:none; }
.diary-title a:hover { color:var(--sky3); }
.diary-excerpt { font-size:11.5px;color:var(--text-mid);line-height:1.6;margin-bottom:8px; }

/* ======== LINKS TAB ======== */
.links-row { display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(255,255,255,.45);border:1px solid rgba(160,210,245,.4);border-radius:8px;text-decoration:none;transition:all .12s;box-shadow:0 2px 6px rgba(80,160,200,.1),inset 0 1px 0 rgba(255,255,255,.7); }
.links-row:hover { background:rgba(255,255,255,.7);transform:translateX(3px); }
.lk-name  { font-size:12px;font-weight:bold;color:var(--text-dark); }
.lk-sub   { font-size:10.5px;color:var(--text-light); }
.lk-arrow { font-size:10px;color:var(--sky3);opacity:.7; }

/* ======== SIDEBAR ======== */
.sidebar { display:flex;flex-direction:column;gap:10px; }

/* Profile */
.sb-profile .post-inner { display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px; }
.sb-avatar { width:76px;height:76px;border-radius:12px;background:linear-gradient(135deg,#b0f0e8,#80c8f8 50%,#a0d8ff);border:2px solid rgba(255,255,255,.8);box-shadow:0 5px 16px rgba(40,120,200,.25),inset 0 1px 0 rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; }
.sb-avatar::before { content:'';position:absolute;top:3px;left:3px;right:3px;height:35%;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);border-radius:8px 8px 50% 50%;z-index:2;pointer-events:none; }
.sb-avatar .icon-img { width:100%;height:100%;object-fit:cover;border-radius:10px;display:block;position:relative;z-index:1; }
.sb-avatar .icon-fallback { font-size:36px;display:none;position:relative;z-index:1; }
.sb-name { font-size:14px;font-weight:bold;color:var(--text-dark);text-shadow:0 1px 0 rgba(255,255,255,.7); }
.sb-sub  { font-size:10.5px;color:var(--text-light);line-height:1.4; }
.sb-status { display:flex;align-items:center;gap:5px;font-size:11px;color:var(--aqua3);font-weight:bold; padding-bottom:5px; }
.sb-status-dot { width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#a0ff80,#30d020);animation:onlinePulse 2s ease-in-out infinite; margin-top:2px; }
@keyframes onlinePulse { 0%,100%{box-shadow:0 0 0 0 rgba(50,200,50,.5)} 50%{box-shadow:0 0 0 4px rgba(50,200,50,0)} }

.msn-icons { display:flex;gap:6px; }
.msn-icon { width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;transition:all .14s;border:1px solid rgba(255,255,255,.5);box-shadow:0 3px 7px rgba(40,120,200,.22),inset 0 1px 0 rgba(255,255,255,.6);position:relative;overflow:hidden; }
.msn-icon::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);border-radius:50% 50% 0 0; }
.msn-icon:hover { transform:scale(1.12) translateY(-2px); }
.msn-icon .icon-img { width:16px;height:16px;object-fit:contain;display:block;position:relative;z-index:1; }
.msn-icon .icon-fallback { font-size:13px;display:none;position:relative;z-index:1; }
.i-blue  { background:radial-gradient(circle at 38% 32%,#a8d8ff,#3090e0); }
.i-aqua  { background:radial-gradient(circle at 38% 32%,#90f0e0,#28b098); }
.i-green { background:radial-gradient(circle at 38% 32%,#a0f068,#38a810); }
.i-pink  { background:radial-gradient(circle at 38% 32%,#ffc8e8,#e068b8); }
.i-sky   { background:radial-gradient(circle at 38% 32%,#b0e0ff,#5ab8f8); }

/* About block */
.about-block { padding:10px 12px; }
.about-block p { font-size:11.5px;color:var(--text-mid);line-height:1.6;margin-bottom:8px; }
.about-list { list-style:none;display:flex;flex-direction:column;gap:2px; }
.about-list li { font-size:11px;color:var(--text-mid);padding:3px 0;border-bottom:1px dashed rgba(100,190,248,.25);display:flex;align-items:center;gap:6px; }
.about-list li:last-child { border:none; }
.al-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.15); }

/* Tags */
.tags-body { padding:10px 12px;display:flex;flex-wrap:wrap;gap:5px; }
.tag-pill { padding:3px 9px;border-radius:10px;font-size:10.5px;background:linear-gradient(180deg,rgba(220,245,255,.8),rgba(190,230,255,.7));border:1px solid rgba(160,215,248,.45);color:var(--text-mid);cursor:pointer;text-decoration:none;transition:all .1s;box-shadow:0 1px 4px rgba(40,120,200,.1),inset 0 1px 0 rgba(255,255,255,.7); }
.tag-pill:hover { background:rgba(255,255,255,.9);transform:scale(1.06);color:var(--sky3); }

/* ======== FOOTER ======== */
footer { background:linear-gradient(180deg,rgba(120,195,248,.96),rgba(48,148,222,.98));border-top:1px solid rgba(255,255,255,.4);box-shadow:0 -4px 16px rgba(40,120,200,.15),inset 0 1px 0 rgba(255,255,255,.4);padding:10px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;position:relative;overflow:hidden; }
footer::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent); }
.footer-copy { font-size:10.5px;color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,60,140,.3);font-weight:bold;position:relative; }
.footer-icons { display:flex;gap:8px;position:relative; }
.footer-orb { width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:11px;box-shadow:0 2px 6px rgba(0,80,180,.25),inset 0 1px 0 rgba(255,255,255,.4);animation:orbFloat 2.5s ease-in-out infinite; }
.footer-orb:nth-child(2){animation-delay:.4s}
.footer-orb:nth-child(3){animation-delay:.8s}
@keyframes orbFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.fo-blue  { background:radial-gradient(circle at 38% 32%,#90d0ff,#2888d8); }
.fo-aqua  { background:radial-gradient(circle at 38% 32%,#80f0e0,#28a890); }
.fo-green { background:radial-gradient(circle at 38% 32%,#90e860,#38a010); }
.footer-made { font-size:10.5px;color:rgba(255,255,255,.75);text-shadow:0 1px 2px rgba(0,60,140,.3);position:relative; }

/* Scrollbar */
::-webkit-scrollbar { width:9px; }
::-webkit-scrollbar-track { background:rgba(200,238,255,.4); }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#88c8f8,#3898d8);border-radius:5px;border:1px solid rgba(255,255,255,.4); }

@media (max-width:680px) {
  .body-wrap { grid-template-columns:1fr; }
  .site-name  { font-size:20px; }
}

/* ======== IMAGE LIGHTBOX ======== */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  cursor: pointer;
  animation: lbFadeIn .2s ease;
}
.lightbox-overlay.open { display: flex; }
@keyframes lbFadeIn { from{opacity:0} to{opacity:1} }

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  animation: lbPop .25s cubic-bezier(.34,1.56,.64,1);
  cursor: default;
}
@keyframes lbPop { from{transform:scale(.8);opacity:0} to{transform:scale(1);opacity:1} }

.lightbox-close {
  position: absolute;
  top: 16px; right: 20px;
  font-size: 28px;
  color: white;
  cursor: pointer;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  transition: transform .15s;
}
.lightbox-close:hover { transform: scale(1.2); }