/* ===== base ===== */
:root{
  --text: #0b0f14;
  --text2:#1a2430;

  --glass: rgba(255,255,255,.40);
  --glass2: rgba(255,255,255,.22);
  --stroke: rgba(255,255,255,.45);

  --shadow: 0 14px 40px rgba(0,0,0,.28);
  --shadow2: 0 8px 22px rgba(0,0,0,.22);

  --radius: 18px;
  --radius2: 14px;

  --accent: rgba(90, 200, 250, .45);
  --accent2: rgba(120, 255, 214, .34);

  --max: 1080px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  line-height:1.35;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x:hidden;
}

/* ===== background ===== */
.bg{
  position:fixed; inset:0;
  background:url("img/bg.jpg") center/cover no-repeat;
  z-index:-2;
}
.bgOverlay{
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1000px 600px at 80% 20%, rgba(120,255,214,.18), transparent 55%),
    radial-gradient(800px 500px at 60% 90%, rgba(90,200,250,.16), transparent 55%),
    rgba(0,0,0,.08);
  z-index:-1;
}

/* ===== glass ===== */
.glass{
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

/* ===== topbar ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.14));
  border-bottom:1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}

.brand{ display:flex; align-items:center; gap:10px; min-width: 220px; }
.orb{
  width:10px; height:10px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.2) 40%, rgba(90,200,250,.35) 75%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}
.brandText{ font-weight:600; color:#0d1722; }

.nav{ display:flex; gap:8px; flex:1; overflow:auto; padding-bottom:2px; }
.nav::-webkit-scrollbar{ height:6px; }
.nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.35); border-radius: 99px; }

.navBtn{
  white-space:nowrap;
  text-decoration:none;
  font-weight:600;
  color:#0d1722;
  padding:7px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
  transition: transform .15s ease, filter .15s ease;
}
.navBtn:hover{ filter: brightness(1.05); }
.navBtn:active{ transform: translateY(1px); }

.glassBtn, .ghostBtn{
  font-family:inherit;
  font-weight:700;
  border-radius: 999px;
  padding:8px 14px;
  cursor:pointer;
}
.glassBtn{
  border:1px solid rgba(255,255,255,.65);
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.25));
  box-shadow: 0 10px 18px rgba(0,0,0,.14);
}
.glassBtn:hover{ filter: brightness(1.03); }
.glassBtn:active{ transform: translateY(1px); }

.ghostBtn{
  border:1px solid rgba(255,255,255,.55);
  background: transparent;
}
.ghostBtn:hover{ background: rgba(255,255,255,.18); }

/* ===== container ===== */
.container{
  max-width: var(--max);
  margin: 18px auto 60px;
  padding: 0 12px;
}

/* ===== headings ===== */
.h1{ margin:0 0 6px; font-size: 34px; letter-spacing:.2px; }
.h2{ margin:0 0 10px; font-size: 22px; }
.h3{ margin:0 0 10px; font-size: 18px; }
.p{ margin: 0 0 12px; }
.small{ font-size: 14px; color: rgba(10,18,26,.85); }
.subtitle{ margin:0 0 12px; color: rgba(10,18,26,.82); font-weight:600; }
.note{ margin:12px 0 0; font-size: 13px; color: rgba(10,18,26,.78); }
.note.tiny{ font-size: 12px; }

/* ===== hero ===== */
.gridHero{ margin-top: 10px; }
.heroCard{ padding: 16px; }
.heroLeft{
  display:flex; gap:14px; align-items:flex-start;
}
.mePicWrap{
  width: 80px; height: 80px; flex: 0 0 auto;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: var(--shadow2);
}
.mePic{ width:100%; height:100%; object-fit: cover; }

.meText{ flex:1; min-width: 240px; }

.heroActions{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top: 8px;
}
.pill{
  display:inline-block;
  text-decoration:none;
  font-weight:700;
  color:#0d1722;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.65);
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.25));
  box-shadow: 0 10px 18px rgba(0,0,0,.14);
}
.pill:active{ transform: translateY(1px); }

.heroRight{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin-top: 14px;
}

@media (min-width: 900px){
  .heroCard{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 14px;
    align-items:start;
  }
  .heroRight{ margin-top: 0; }
}

.avatarBox{
  padding: 12px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.18);
}
.avatarTitle{
  font-weight: 800;
  margin-bottom: 8px;
}
.avatarFrame{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.22);
  height: 150px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.avatarImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.miniCard{
  padding: 12px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.18);
}
.miniTitle{
  font-weight: 800;
  margin-bottom: 8px;
}
.miniRow{ display:flex; gap:10px; align-items:center; }
.disc{
  width: 34px; height: 34px; border-radius: 999px;
  background: conic-gradient(from 0deg, #ff3b30, #ffcc00, #34c759, #0a84ff, #af52de, #ff3b30);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.miniMain{ font-weight:800; }
.miniSub{ font-size: 12px; color: rgba(10,18,26,.76); }

.count{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
}

.cities{
  margin:0; padding-left: 18px;
}
.cities li{ margin: 4px 0; }

/* ===== sections ===== */
.section{ margin-top: 18px; }
.sectionTitle{
  margin: 8px 0 12px;
  font-size: 24px;
  color:#07111a;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* ===== posts ===== */
.post{
  padding: 14px 14px 12px;
  margin-bottom: 12px;
}
.postHead{
  display:flex; justify-content:space-between; gap:10px;
  align-items:baseline;
}
.postTitle{ font-weight: 900; font-size: 16px; }
.postDate{ color: rgba(10,18,26,.70); font-size: 12px; }
.postBody{ margin-top: 8px; }

/* ===== main grid ===== */
.gridMain{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}
@media (min-width: 900px){
  .gridMain{
    grid-template-columns: 1fr 1fr;
  }
}
.card{ padding: 14px; }

/* button grid */
.btnGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px){
  .btnGrid{ grid-template-columns: 1fr; }
}
.winBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight: 900;
  color:#0d1722;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.70);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.25));
  box-shadow: 0 12px 18px rgba(0,0,0,.14);
  transition: transform .15s ease, filter .15s ease;
}
.winBtn:hover{ filter: brightness(1.03); }
.winBtn:active{ transform: translateY(1px); }

/* list 2 columns */
.list2{
  margin:0;
  padding-left: 18px;
  columns: 2;
  column-gap: 22px;
}
@media (max-width: 540px){
  .list2{ columns: 1; }
}

/* photos */
.photoGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 540px){
  .photoGrid{ grid-template-columns: 1fr; }
}
.ph{
  width:100%;
  height: 170px;
  object-fit: cover;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.60);
  box-shadow: 0 10px 18px rgba(0,0,0,.16);
}

/* ===== expand animation ===== */
@keyframes pop {
  0%   { transform: scale(.985); }
  60%  { transform: scale(1.012); }
  100% { transform: scale(1); }
}
.pop{ animation: pop .42s ease; }

/* ===== modal ===== */
.modal{
  position:fixed; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 14px;
  background: rgba(0,0,0,.28);
  z-index: 120;
}
.modal.is-open{ display:flex; }

.modalBox{
  position:relative;
  width: min(520px, 100%);
  padding: 16px;
}
.modalX{
  position:absolute;
  top: 10px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.40);
  cursor:pointer;
  font-size: 22px;
  line-height: 30px;
}
.modalRow{ display:flex; gap:10px; margin-top: 12px; flex-wrap:wrap; }

.input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.70);
  background: rgba(255,255,255,.60);
  font-size: 16px;
  outline: none;
}
.input:focus{
  box-shadow: 0 0 0 4px rgba(90,200,250,.22);
}

/* ===== winamp ===== */
.winamp{
  position: fixed;
  right: 12px;
  top: 62px;
  width: 290px;
  padding: 10px;
  z-index: 90;
  border-radius: 16px;
}

.waTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}
.waTitle{ font-weight: 900; }
.waClose{
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.35);
  cursor:pointer;
  font-size: 20px;
}

.waInfo{
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.18);
}
.waLine{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin: 4px 0;
  font-size: 12px;
}
.waLbl{ color: rgba(10,18,26,.75); font-weight:800; }
.waVal{ font-weight:900; max-width: 170px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.waControls{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top: 10px;
}
.iconBtn{
  width: 44px; height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.70);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.25));
  cursor:pointer;
  box-shadow: 0 10px 16px rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
}
.iconBtn svg{
  width: 22px; height: 22px;
  fill: rgba(8,14,20,.86);
}
.iconBtn:active{ transform: translateY(1px); }

.waSliders{
  display:grid;
  gap: 8px;
  margin-top: 10px;
}
.waSlider{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 12px;
  font-weight: 900;
}
.waSlider input{ flex:1; }

/* weather widget fix */
.weatherwidget-io{
  border-radius: 14px !important;
  overflow:hidden !important;
}