/* =========== THEME TOKENS =========== */
:root{
  /* cold, glowy base */
  --bg:#e6f1ff;        /* page background – soft icy blue */
  --tile:#f3f8ff;      /* subtle panels / tiles */
  --card:#fdfdff;      /* main card backgrounds: almost pure white */

  /* text + lines */
  --ink:#1f2940;       /* deep bluish text (not pure black) */
  --line:#ffc5ed;      /* light periwinkle borders */

  /* accents = cyber glow */
  --accent:#a9c3ff;       /* main blue button color */
  --accent-2:#d6e3ff;     /* lighter blue blocks / logs */
  --accent-dark:#6e86ff;  /* hover / emphasis */

  /* soft pink echo of OK branding */
  --accent-pink:#fcfcfc;
}

/* =========== BASE =========== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
a{ color:var(--accent-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }

body{
  background:
    radial-gradient(circle at 0% 0%, #ffffff 0, #e6f1ff 40%, #d1ddff 100%);
  background-attachment: fixed;
  color:var(--ink);
  line-height:1.6;
  font-family: monospace, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: small;
}

/* =========== PAGE FRAME =========== */
.site{
  max-width:1080px;
  margin:30px auto;
  padding:0 12px;
}

/* --- MAIN CONTAINER --- */
.container{
  background: #ecf5fd;
  border: 2px solid var(--line);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.8),
    0 12px 30px rgba(90,110,180,.35);
  padding: 10px;
  border-radius: 26px;
  position: relative;
}

/* subtle pixel/dot frame around whole app */
.container.lace-frame::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:20px;
  border:1px dotted rgba(160,185,255,.8);
  pointer-events:none;
}

/* =========== HEADER =========== */
header.site-header{
  position: relative;
  margin: 6px 6px 10px;
  padding: 16px 20px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg,#f9fbff,#edf3ff);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 14px rgba(120,140,200,.35);
  border:1px solid rgba(180,200,255,.9);
  display:flex;
  align-items:center;
  gap:14px;
}

/* aqua-style “window” chrome */
header.site-header::before{
  content:"○  ○  ○";
  font-size:11px;
  letter-spacing:3px;
  color:rgba(150,170,220,.9);
  position:absolute;
  top:6px;
  left:14px;
  font-family: "Menlo", "SF Mono", ui-monospace, monospace;
}

header.site-header h1{
  margin:0;
  font-family: "Andale Mono", cursive;
  font-size: clamp(1.9rem, 3.3vw, 2.4rem);
  text-shadow: 0 0 10px rgba(200,220,255,.85);
}

header.site-header p{
  margin:0;
  font-size:.9rem;
  opacity:.85;
}

/* small ASCII/icon next to title */
header.site-header .ascii-badge{
  margin-left:auto;
  font-family: "Menlo", ui-monospace, monospace;
  font-size:.7rem;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(180,200,255,.9);
  background:rgba(244,249,255,.9);
}

/* =========== COLUMNS =========== */
.columns{
  display:flex;
  gap:12px;
  padding-top: 4px;
  align-items:stretch;
}
.col{ display:flex; flex-direction:column; gap:12px; }
.left{  flex:0 0 22%; min-width:220px; }
.center{flex:1 1 auto; padding-bottom: 10px;}
.right{ flex:0 0 22%; min-width:220px; }

/* =========== CARDS / BOXES =========== */
.border-box{
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:14px;
  box-shadow:0 2px 0 #d3e0ff;
  padding:8px;
  background: radial-gradient(circle at 0 0,#f8fbff 0,#eef3ff 55%,#e2ecff 100%);
  position:relative;
}

/* tiny dotted edge for cyber feel */
.border-box::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:11px;
  border:1px dotted rgba(185,205,255,.7);
  pointer-events:none;
}

/* main content “window” look */
.box{
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 3px 0 #b7c7ff;
  padding:10px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.95),rgba(238,244,255,.95)),
    url("img/plaid-white.jpg") center/cover no-repeat;
  font-size: small;
}

/* Ribbon labels with ASCII icons */
.rib{
  display:block;
  background:linear-gradient(135deg,var(--accent),var(--accent-pink));
  color:#fff;
  text-align:left;
  padding:6px 12px;
  border-radius:999px;
  font-weight:700;
  margin:-4px -2px 10px;
  border:1px solid #fff;
  box-shadow:0 2px 0 #9bb1ff;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  position:relative;
}

.rib::before{
  content:"✦";
  font-family: "Menlo", ui-monospace, monospace;
  margin-right:6px;
  font-size:.75rem;
}

/* =========== NAV (TOP TABS) =========== */
.nav-box{
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 3px 0 #c3d1ff;
  padding: 6px 8px 4px;
  background: linear-gradient(135deg, #f3f8ff, #e6f1ff);
  overflow: visible;
}

nav.nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 10px;
  margin:0 0 4px;
}

/* cyber tabs */
.lace-btn{
  position:relative;
  display:inline-block;
  background:#fdfdff;
  color:var(--ink);
  font-family: "Andale Mono", cursive;
  font-weight:700;
  text-decoration:none;
  padding:5px 22px 6px;
  line-height:1;
  border-radius:999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 0 #b4c4ff;
  border:1px solid rgba(178,196,255,.95);
  font-size:.95rem;
  transition:all .18s ease;
}

.lace-btn::after{
  content:"›";
  font-family:"Menlo", ui-monospace, monospace;
  font-size:.7rem;
  margin-left:6px;
  opacity:.6;
}

.lace-btn:hover{
  background:#eef3ff;
  color:var(--accent-dark);
  filter:brightness(1.04);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 4px 0 #aab9ff;
}

/* right-column buttons */
.btn{
  display:block;
  background:linear-gradient(135deg,var(--accent),var(--accent-pink));
  color:#fff;
  padding:8px 10px;
  border-radius:12px;
  border:2px solid #fff;
  outline:1px solid rgba(130,150,240,.9);
  font-weight:700;
  margin:6px 0;
  box-shadow:0 3px 0 #9caeff;
}
.btn:hover{ filter:brightness(.96); }

/* =========== HUD STYLE SIDE PANELS =========== */
.hud-panel{
  background: radial-gradient(circle at 10% 0%,#f6f8ff 0,#e4edff 55%,#dde7ff 100%);
  border-radius:18px;
  border:1.5px solid rgba(175,195,255,.95);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    0 4px 16px rgba(100,120,200,.35);
}

.hud-panel::before{
  content:"sys://panel";
  position:absolute;
  top:6px;
  right:12px;
  font-family:"Menlo", ui-monospace, monospace;
  font-size:.65rem;
  text-transform:lowercase;
  color:rgba(105,125,190,.9);
}

/* left “mood / nav” list look */
.list{
  background:rgba(255,255,255,.96);
  border:1px dashed var(--line);
  border-radius:12px;
  padding:8px 12px;
}
.list ul{ margin:.25rem 0 .25rem 18px; padding:0; }

/* =========== LOG / TAGS =========== */
.log{
  display:block;
  background:var(--accent-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
  margin:.35rem 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 2px 0 #b4c4ff;
  font-size:.86rem;
}

/* small ascii bullet */
.log::before{
  content:"◎";
  font-family:"Menlo", ui-monospace, monospace;
  font-size:.7rem;
  margin-right:6px;
}

/* about block */
.about-wrap{
  display:flex;
  gap:10px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.about-photo{
  width:120px; height:120px; object-fit:cover;
  border-radius:12px; border:2px solid var(--line);
  background:#f7f7f7;
}

/* =========== STATS PANEL =========== */
.stats-panel{
  font-size:.78rem;
}

.stats-panel .stats-list{
  list-style:none;
  margin:4px 0 0;
  padding:0;
  font-family:"Menlo", ui-monospace, monospace;
}

.stats-panel .stats-list li{
  display:flex;
  justify-content:space-between;
  padding:3px 0;
  border-bottom:1px dotted rgba(175,195,255,.7);
}
.stats-panel .stats-list li:last-child{
  border-bottom:none;
}

/* =========== TEXT =========== */
.para{ line-height:1.7; margin:.35rem 0; font-size:.9rem; }

/* =========== FOOTER (INSIDE CONTAINER) =========== */
footer.site-foot{
  background:#fdfdff;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:10px;
  font-size:.8rem;
  text-align:center;
  color:var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 0 #b9c9ff;
  margin-top:auto;
  width:100%;
  position:relative;
}

footer.site-foot::before{
  content:"net status: online ✶";
  position:absolute;
  left:12px;
  top:8px;
  font-family:"Menlo", ui-monospace, monospace;
  font-size:.65rem;
  opacity:.65;
}

/* =========== GALLERY PAGE (unchanged layout) =========== */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 8px;
}

.gallery-item img{
  width:100%;
  aspect-ratio: 1.5 / 1.5;
  object-fit: cover;
  border-radius:8px;
  border:1px solid #c5d6ff;
  box-shadow:0 2px 0 #b4c4ff;
}

.gallery-item:hover{
  transform: translateY(-4px);
  filter: brightness(1.05);
}
caption {
  /* Text styling */
  font-size: 1.2em; /* Adjust font size */
  color: #333; /* Set text color */
  text-align: center; /* Align text (left, center, right, justify) */
  line-height: 1.5; /* Control line spacing */
}

/* Calendar */
/* ========== CALENDAR WIDGET ========== */

.calendar-widget{
  margin-top:6px;
  padding:10px 12px 12px;
  border-radius:20px;
  background:
    radial-gradient(circle at 0 0,#ffffff 0,#f3f5ff 45%,#e6ecff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 14px rgba(140,150,200,.25);
  border:1px solid rgba(200,210,245,.9);
  font-size:.75rem;
}

/* header row (month + status pill) */
.cal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}

.cal-month{
  font-family:"Menlo", ui-monospace, monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:#59638a;
}

.cal-status{
  font-family:"Menlo", ui-monospace, monospace;
  font-size:.65rem;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(172,200,255,.18);
  border:1px solid rgba(172,200,255,.7);
  color:#55608b;
}

/* weekday labels */
.cal-weekdays{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:4px;
  margin:4px 0 4px;
  text-align:center;
  font-family:"Menlo", ui-monospace, monospace;
  font-size:.65rem;
  text-transform:uppercase;
  color:#7b86a6;
}

/* day grid */
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:4px;
}

.cal-day{
  height:26px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  color:#555c80;
  background:rgba(255,255,255,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 0 rgba(195,205,235,.8);
}

.cal-day.cal-empty{
  visibility:hidden;
}

/* event days – subtle neon ring + dot label on hover */
.cal-day.cal-event{
  position:relative;
  font-weight:700;
  color:#32436f;
  background:radial-gradient(circle at 50% 0%,rgba(181,204,255,.85),rgba(255,255,255,.95));
  box-shadow:
    0 0 0 1px rgba(160,190,255,.6),
    0 0 8px rgba(140,180,255,.65);
}

.cal-day.cal-event::after{
  content:"";
  position:absolute;
  bottom:4px;
  right:5px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#6e86ff; /* small glowing dot */
}

/* optional tooltip-style label on hover */
.cal-day.cal-event::before{
  content:attr(data-label);
  position:absolute;
  bottom:110%;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(18,24,46,.9);
  color:#fff;
  font-size:.65rem;
  font-family:"Menlo", ui-monospace, monospace;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.cal-day.cal-event:hover::before{
  opacity:1;
}

/* legend line at the bottom */
.cal-legend{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  font-size:.7rem;
  color:#6a7395;
}

.cal-legend .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#6e86ff;
  box-shadow:0 0 4px rgba(110,134,255,.8);
}

.cal-legend .label{
  font-family:"Menlo", ui-monospace, monospace;
}
/* Calendar End */

/* IPOD */
#miniplay {
  /* make it fill the stats card but not overflow */
  /* make it fit inside the right-column card */
  width: 98%;              /* a bit smaller than the border-box above */
  max-width: 260px;        /* prevents it from getting too wide */
  margin: 10px auto 0;     /* center it under “system stats” */

  font-family: "Inter", serif;
  background: #F5F5F5;
  border: 1px solid #D6D6D6;
  border-radius: .625rem;
  box-shadow:
    inset 10px 0px 6px -10px #CCC,
    inset -10px 0px 6px -10px #CCC,
    inset 0px 10px 6px -10px #FFF,
    inset 0px -10px 6px -10px #CCC;
  padding: 12px;
  margin: 8px auto 0;          /* center inside the border-box */
}

/* album + text row */
.stats {
  display: flex;
  align-items: center;         /* vertical centering with album art */
  gap: 10px;
}

/* album art stays the same size */
.track-art {
  width: 3.5em;
  height: 3.5em;
  object-fit: cover;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  flex: 0 0 3.5em;             /* fixed width column */
}

/* text block next to cover */
.track-info {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  flex: 1;                     /* take remaining space */
  min-width: 0;                /* allow wrapping instead of pushing container */
}

.now-playing,
.track-name,
.track-artist {
  color: #555;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

/* subtle hierarchy */
.now-playing {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
  margin-bottom: 2px;
}

/* keep long titles from spilling out */
.track-name,
.track-artist {
  white-space: normal;
  word-wrap: break-word;
}

/* slider row stays the same, but let it shrink with the card */
.slider_container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0;
}

/* FIX BUTTON ROW */
.bttn {
  display: flex;
  justify-content: center;   /* center them horizontally */
  align-items: center;       /* align vertically */
  gap: 22px;                 /* spacing between buttons */
  margin-top: 8px;
  width: 100%;               /* make row full width */
}

/* ensure each button renders inline */
.prev-track,
.playpause-track,
.next-track {
  display: flex;  
  align-items: center;
  justify-content: center;
  width: 36px;               /* optional: keeps sizes consistent */
  height: 36px;
}


i.fa-play,
i.fa-pause,
.prev-track,
.next-track {
  cursor: pointer;
}
/* IPOD END */



/* ... keep your existing seek_slider / buttons / etc. */


/* =========== RESPONSIVE =========== */
@media (max-width: 860px){
  .columns{ flex-direction:column; }
  .left, .right{ min-width:unset; }
  header.site-header{ flex-direction:column; align-items:flex-start; }
}