/* ============ THEME TOKENS — "Blackberry Dreams" pastel ============ */
:root{
  --void:#fbf1f4;      /* whitish pastel-pink page */
  --void2:#f3e0e6;
  --panel:#fffafc;     /* near-white panels */
  --panel2:#f7e9ee;
  --ink:#2C1F1B;       /* Midnight Escape — body text */
  --muted:#7c5a5e;     /* secondary text */
  --deep:#70494A;      /* Gateway Smoke — name / accents */
  --hot:#D798A3;       /* Psychic Clarity — bright accent */
  --hot2:#b87385;      /* deeper pink for emphasis */
  --purple:#9B666B;    /* Hollow Promises */
  --line:#ebd2d9;      /* soft border */
  --link:#9b5566;      /* rosy link */
  --good:#6fae7e;      /* soft "online" green */
  --barA:#9B666B;      /* box-header gradient */
  --barB:#70494A;
  --tilesize:64px;
  --tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none'%3E%3Cpath d='M12 16c-3-4-9-1-9 3 0 4 9 9 9 9s9-5 9-9c0-4-6-7-9-3z' fill='%23D798A3' opacity='.40'/%3E%3Cpath d='M48 44c-2-3-7-1-7 2 0 3 7 7 7 7s7-4 7-7c0-3-5-5-7-2z' fill='%239B666B' opacity='.32'/%3E%3Cpath d='M50 12l1.6 4.4L56 18l-4.4 1.6L50 24l-1.6-4.4L44 18l4.4-1.6z' fill='%23c98fa0' opacity='.55'/%3E%3Cpath d='M16 46l1.2 3.3L20.5 50.5l-3.3 1.2L16 55l-1.2-3.3L11.5 50.5l3.3-1.2z' fill='%2370494A' opacity='.30'/%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:Verdana, Tahoma, Geneva, sans-serif;
  font-size:12px;
  color:var(--ink);
  background-color:var(--void);
  background-image:var(--tile),
    linear-gradient(180deg, #fdf5f7 0%, #f1dbe2 70%, #e8cdd6 100%);
  background-size:var(--tilesize), cover;
  background-attachment:fixed;
  line-height:1.5;
}
a{color:var(--link); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}

/* ============ TOP BAR ============ */
.topbar{
  background:linear-gradient(180deg, #ffffff, var(--panel2));
  border-bottom:2px solid var(--hot);
  padding:8px 14px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  position:sticky; top:0; z-index:30;
}
.brand{
  font-family:'UnifrakturMaguntia', serif;
  font-size:26px; color:var(--deep);
  text-shadow:0 1px 0 #fff; letter-spacing:1px;
  text-decoration:none;
}
.brand:hover{text-decoration:none;}
.brand small{
  font-family:Verdana,sans-serif; font-size:10px;
  color:var(--muted); display:block; margin-top:-2px; text-shadow:none;
}
.topsearch{margin-left:auto; display:flex; gap:6px; align-items:center;}
.topsearch input{
  background:#fff; border:1px solid var(--line);
  color:var(--ink); padding:4px 7px; font-size:11px; font-family:inherit; width:150px;
}
.pixel-btn{
  font-family:Verdana,sans-serif; font-size:11px; cursor:pointer;
  color:#fff; padding:4px 10px;
  background:linear-gradient(180deg, var(--hot), var(--purple));
  border:1px solid #ffffffaa; border-radius:3px;
  box-shadow:inset 0 1px 0 #ffffffaa, 0 1px 2px #70494a55;
}
.pixel-btn:hover{filter:brightness(1.05);}
.pixel-btn:active{transform:translateY(1px);}

.subnav{
  background:var(--panel); border-bottom:1px solid var(--line);
  padding:6px 14px; display:flex; gap:4px; flex-wrap:wrap;
  font-family:'VT323', monospace; font-size:17px;
  position:sticky; top:48px; z-index:29;
}
.subnav a{color:var(--deep); padding:1px 8px; border-radius:3px;}
.subnav a:hover{background:var(--purple); color:#fff; text-decoration:none;}
.subnav a.active{background:var(--deep); color:#fff;}

/* ============ LAYOUT ============ */
.wrap{max-width:1000px; margin:16px auto; padding:0 12px;
      display:grid; grid-template-columns:320px 1fr; gap:16px;}
@media (max-width:760px){ .wrap{grid-template-columns:1fr;} .subnav{top:auto; position:static;} }

/* ============ BOX ============ */
.box{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:7px;
  margin-bottom:14px;
  overflow:hidden;
  box-shadow:0 2px 8px #9b666b22;
}
.box-h{
  background:linear-gradient(90deg, var(--barA), var(--barB));
  color:#fff; font-weight:bold; font-size:12px;
  padding:6px 10px; text-shadow:0 1px 1px #00000033;
  display:flex; justify-content:space-between; align-items:center;
}
.box-h .edit{font-weight:normal; font-size:10px; opacity:.85;}
.box-b{padding:10px 12px;}

/* ============ PROFILE SIDEBAR ============ */
.name{
  font-family:'UnifrakturMaguntia', serif;
  font-size:30px; line-height:1.05; color:var(--deep);
  text-shadow:0 1px 0 #ffffffcc;
  margin:0 0 2px; word-break:break-word;
}
.handle{font-size:11px; color:var(--muted); margin-bottom:10px;}
.pfp{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border:3px solid #fff; border-radius:4px;
  box-shadow:0 1px 6px #9b666b44;
  display:flex; align-items:flex-end; justify-content:center;
  color:#fff; font-family:'VT323',monospace; font-size:20px;
  text-shadow:0 1px 3px #00000066; padding-bottom:8px;
}
.mood{margin-top:9px; font-size:11px;}
.online{color:var(--good); font-weight:bold;}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%;
     background:var(--good); box-shadow:0 0 6px var(--good); margin-right:4px;}
.viewmy{margin-top:8px; font-size:11px; text-align:center;
        border-top:1px dashed var(--line); padding-top:8px;}

.stats{list-style:none; margin:0; padding:0; font-size:11px;}
.stats li{display:flex; gap:8px; padding:3px 0; border-bottom:1px dotted var(--line);}
.stats li:last-child{border-bottom:none;}
.stats b{color:var(--deep); min-width:78px; display:inline-block;}

.links-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.link-btn{
  display:flex; align-items:center; gap:7px; justify-content:flex-start;
  padding:7px 9px; font-size:11px; color:var(--ink);
  background:linear-gradient(180deg, #fff, var(--panel2));
  border:1px solid var(--line); border-radius:5px;
}
.link-btn:hover{border-color:var(--hot); text-decoration:none; color:var(--deep);}
.link-btn .ic{font-size:15px;}

.deets{width:100%; border-collapse:collapse; font-size:11px;}
.deets td{padding:4px 6px; vertical-align:top; border-bottom:1px dotted var(--line);}
.deets td:first-child{color:var(--deep); font-weight:bold; white-space:nowrap; width:42%;}

/* ============ MAIN CONTENT ============ */
.marquee{
  overflow:hidden; white-space:nowrap; border:1px solid var(--line);
  background:#fff; border-radius:6px; padding:5px 0; margin-bottom:14px;
  font-family:'VT323',monospace; font-size:18px; color:var(--deep);
}
.marquee span{display:inline-block; padding-left:100%; animation:scroll 22s linear infinite;}
@keyframes scroll{to{transform:translateX(-100%);}}

.page-title{font-family:'UnifrakturMaguntia',serif; color:var(--deep);
  font-size:24px; margin:0 0 10px; text-shadow:0 1px 0 #fff;}

.blurb h4{margin:0 0 4px; color:var(--deep); font-size:12px;}
.blurb p{margin:0 0 14px; font-size:11px;}
.blurb p:last-child{margin-bottom:0;}
.angel-line{
  font-family:'Tangerine', cursive; font-size:46px; line-height:1;
  text-align:center; color:var(--deep); opacity:.92; margin:6px 0;
  text-shadow:0 1px 0 #ffffffcc;
}

.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
@media (max-width:420px){ .gallery{grid-template-columns:repeat(2,1fr);} }
.shot{
  position:relative; aspect-ratio:3/4; border-radius:5px; overflow:hidden;
  border:2px solid #fff; cursor:pointer;
  display:flex; align-items:flex-end; box-shadow:0 1px 5px #9b666b33;
  transition:transform .15s ease, border-color .15s ease;
}
.shot::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, #2c1f1baa);}
.shot .cap{position:relative; z-index:2; color:#fff;
  padding:6px 7px; font-family:'VT323',monospace; font-size:14px;
  text-shadow:0 1px 2px #000;}
.shot:hover{border-color:var(--hot); transform:scale(1.02);}
.morelink{display:block; text-align:center; margin-top:12px; font-family:'VT323',monospace; font-size:16px;}

/* big link buttons (links page) */
.biglinks{display:flex; flex-direction:column; gap:12px;}
.biglink{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:linear-gradient(180deg,#fff,var(--panel2));
  border:1px solid var(--line); border-radius:8px; color:var(--ink);
  box-shadow:0 1px 5px #9b666b22;
}
.biglink:hover{border-color:var(--hot); text-decoration:none; transform:translateX(3px);}
.biglink{transition:transform .12s ease, border-color .12s ease;}
.biglink .ic{font-size:26px;}
.biglink b{color:var(--deep); font-size:14px; display:block;}
.biglink span{font-size:11px; color:var(--muted);}

/* guestbook */
.gb-item{border-bottom:1px solid var(--line); padding:8px 0; display:flex; gap:10px;}
.gb-item:last-child{border-bottom:none;}
.gb-av{width:42px; height:42px; flex:0 0 42px; border-radius:4px;
  background:linear-gradient(135deg,var(--purple),var(--hot));
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:'VT323',monospace; font-size:18px;}
.gb-meta{font-size:10px; color:var(--muted); margin-bottom:2px;}
.gb-meta b{color:var(--deep);}
.gb-text{font-size:11px;}
.gb-form{margin-top:12px; display:flex; flex-direction:column; gap:7px;}
.gb-form input, .gb-form textarea{
  background:#fff; border:1px solid var(--line); color:var(--ink);
  padding:6px 8px; font-family:inherit; font-size:11px; border-radius:4px; resize:vertical;}

.center{text-align:center;}
.footer{text-align:center; font-size:10px; color:var(--muted);
  padding:22px 12px 40px; line-height:1.8;}
.footer a{color:var(--muted);}

.sparkle{position:fixed; pointer-events:none; z-index:9999; font-size:13px;
  animation:fall .8s linear forwards; will-change:transform,opacity;}
@keyframes fall{
  from{transform:translate(-50%,-50%) scale(1) rotate(0); opacity:1;}
  to{transform:translate(-50%, 18px) scale(.2) rotate(140deg); opacity:0;}
}

:focus-visible{outline:2px solid var(--hot2); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  .marquee span{animation:none; padding-left:8px;}
  *{scroll-behavior:auto;}
}

/* ============ COMING SOON SPLASH ============ */
.cs-page{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:30px 16px;
}
.cs-card{
  width:100%; max-width:520px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:10px; overflow:hidden;
  box-shadow:0 6px 28px #9b666b33;
}
.cs-stripe{
  height:12px;
  background:repeating-linear-gradient(45deg,
    var(--hot) 0 14px, var(--panel2) 14px 28px);
}
.cs-body{padding:34px 26px 30px; text-align:center;}
.cs-eyebrow{
  font-family:'VT323',monospace; font-size:16px; color:var(--purple);
  letter-spacing:1px; margin-bottom:6px;
}
.cs-name{
  font-family:'UnifrakturMaguntia', serif; color:var(--deep);
  font-size:46px; line-height:1; margin:0 0 4px; text-shadow:0 1px 0 #fff;
  word-break:break-word;
}
.cs-soon{
  font-family:'Tangerine', cursive; font-size:52px; line-height:1;
  color:var(--hot2); margin:2px 0 12px; text-shadow:0 1px 0 #fff;
}
.cs-note{
  font-size:12px; color:var(--muted); max-width:360px;
  margin:0 auto 22px; line-height:1.6;
}

/* countdown */
.countdown{display:flex; gap:10px; justify-content:center; margin:0 0 22px;}
.cd-cell{
  background:linear-gradient(180deg,#fff,var(--panel2));
  border:1px solid var(--line); border-radius:8px;
  padding:10px 6px; min-width:62px; box-shadow:0 1px 5px #9b666b22;
}
.cd-num{
  display:block; font-family:'VT323',monospace; font-size:34px;
  line-height:1; color:var(--deep);
}
.cd-lab{
  display:block; font-family:'VT323',monospace; font-size:14px;
  color:var(--muted); margin-top:2px; text-transform:lowercase;
}
.cd-fallback{
  font-family:'Tangerine',cursive; font-size:40px; color:var(--deep);
  margin:0 0 22px;
}
@media (max-width:420px){
  .cd-cell{min-width:0; flex:1; padding:8px 2px;}
  .cd-num{font-size:26px;}
  .cs-name{font-size:36px;}
  .cs-soon{font-size:42px;}
}

.cs-follow{
  font-family:'VT323',monospace; font-size:17px; color:var(--deep);
  border-top:1px dashed var(--line); padding-top:16px; margin-bottom:12px;
}
.cs-links{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.cs-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; font-size:12px; color:var(--ink);
  background:linear-gradient(180deg,#fff,var(--panel2));
  border:1px solid var(--line); border-radius:6px;
}
.cs-link:hover{border-color:var(--hot); color:var(--deep); text-decoration:none;}
.cs-link .ic{font-size:15px;}
.cs-foot{
  margin-top:18px; font-size:11px; color:var(--muted);
  font-family:'VT323',monospace; font-size:15px;
}

/* ============ ADMIN PANEL ============ */
.admin-wrap{max-width:760px; margin:16px auto; padding:0 12px;}
.admin-intro{font-size:12px; color:var(--muted); margin:8px 2px 14px;}
.admin-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:560px){ .admin-grid{grid-template-columns:1fr;} }
.box-b label{display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--deep); font-weight:bold;}
.box-b label small{font-weight:normal; color:var(--muted);}
.box-b label.full{margin-bottom:10px;}
.box-b label.chk{flex-direction:row; align-items:center; gap:8px; font-weight:normal; color:var(--ink); grid-column:1 / -1;}
.admin-wrap input[type=text],
.admin-wrap input:not([type]),
.admin-wrap input[type=password],
.admin-wrap textarea{
  background:#fff; border:1px solid var(--line); color:var(--ink);
  padding:7px 9px; font-family:inherit; font-size:12px; border-radius:5px; width:100%; resize:vertical;
}
.admin-wrap input:focus, .admin-wrap textarea:focus{outline:none; border-color:var(--hot);}
.box-h .add-row{font-size:11px; padding:3px 9px;}

.rows{display:flex; flex-direction:column; gap:8px;}
.row{display:grid; gap:8px; align-items:center;}
.row-kv{grid-template-columns:1fr 1.4fr auto;}
.row-links{grid-template-columns:auto 1fr 1.3fr 1.3fr auto;}
.row-gallery{grid-template-columns:1.6fr 1fr auto auto;}
.w-icon{max-width:64px;}
@media (max-width:560px){
  .row-kv, .row-links, .row-gallery{grid-template-columns:1fr; }
  .w-icon{max-width:none;}
}
.del-row{
  background:linear-gradient(180deg,#e8b9c2,#c98692); color:#fff; border:1px solid #fff8;
  border-radius:5px; width:28px; height:28px; cursor:pointer; font-size:15px; line-height:1;
}
.del-row:hover{filter:brightness(1.05);}
.hint{font-size:10px; color:var(--muted); margin:8px 2px 0;}

.admin-save{
  position:sticky; bottom:0; background:linear-gradient(180deg,#fff0, var(--void) 40%);
  padding:16px 0 30px; display:flex; align-items:center; gap:12px;
}
.save-btn{font-size:13px; padding:9px 22px;}
.saved-msg{color:var(--good); font-weight:bold; font-size:12px;}
.pw-err{color:#b03a4a; font-weight:bold; font-size:11px; margin:0 0 10px;}

/* ============ TIP JAR ============ */
.tip-btn{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  margin-top:10px; padding:8px 10px; border-radius:6px; color:#fff; font-weight:bold;
  background:linear-gradient(180deg, var(--hot), var(--purple)); border:1px solid #fff8;
  box-shadow:inset 0 1px 0 #fff8, 0 1px 4px #9b666b44; text-align:center; font-size:12px;
}
.tip-btn:hover{filter:brightness(1.05); text-decoration:none; color:#fff;}
.tip-btn small{font-weight:normal; font-size:9px; opacity:.95;}
.biglink.tip .ic{color:var(--hot2);}

/* ============ VIDEOS ============ */
.video-frame{position:relative; width:100%; aspect-ratio:16/9; border-radius:6px;
  overflow:hidden; border:2px solid #fff; box-shadow:0 1px 6px #9b666b33; background:#000;}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media (max-width:560px){ .video-grid{grid-template-columns:1fr;} }
.video-title{font-family:'VT323',monospace; font-size:15px; color:var(--deep); margin-top:6px;}

/* ============ PORTFOLIO PROJECT HEADINGS ============ */
.project-title{font-family:'VT323',monospace; font-size:19px; color:var(--deep);
  margin:18px 0 8px; padding-bottom:3px; border-bottom:1px dashed var(--line);}
.project-title:first-of-type{margin-top:4px;}

/* ============ ADMIN MODERATION ITEMS ============ */
.mod-item{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  border-bottom:1px solid var(--line); padding:9px 0;}
.mod-item:last-child{border-bottom:none;}
.mod-item form{margin:0;}
.row-video{grid-template-columns:1.4fr 1fr auto;}
@media (max-width:560px){ .row-video{grid-template-columns:1fr;} }