/* Old manuscript theme — sepia parchment, serif typography, torn edges and ornamental accents */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap');
/* Graffiti and medieval display fonts */
@import url('https://fonts.googleapis.com/css2?family=Nosifer&display=swap'); /* stylised spray/urban */
@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:900&display=swap'); /* gothic/medieval look */
/* Manga and zen friendly fonts */
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap'); /* Japanese-leaning serif for manga captions */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); /* clean Japanese sans for modern/zen */

:root{
  --parchment-1: #f6ecd8;
  --parchment-2: #efe1b8;
  --ink: #1b1208; /* darker ink for better contrast */
  --muted-ink: #4a3528; /* stronger muted text */
  --accent-ornament: #7a391f; /* deeper accent */
  --card-bg: rgba(255,250,236,0.98);
  --shadow-soft: 0 22px 48px rgba(18,12,8,0.12); /* stronger shadow */
  --shadow-strong: 0 30px 80px rgba(12,8,6,0.14);
  --radius:14px;

  /* manga + zen accents */
  --manga-ink: #0d0d0d;
  --manga-tone: #f4f6fa;
  --zen-bg: #fbfdfb;
  --zen-accent: #7aa77a; /* soft bamboo green */
}

/* reset & base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:
  radial-gradient(800px 400px at 15% 10%, rgba(138,75,47,0.07), transparent 10%),
  linear-gradient(180deg,var(--parchment-1),var(--parchment-2));
  font-family:"EB Garamond", "IM Fell English", serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
#app{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  /* reserve more vertical space at top so the floating header cannot overlap the card/preview */
  padding-top:760px;
}

/* subtle paper grain overlay */
.bg-decor{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(transparent 80%, rgba(0,0,0,0.02) 100%),
    radial-gradient(600px 300px at 10% 12%, rgba(138,75,47,0.05), transparent 10%),
    radial-gradient(520px 240px at 85% 88%, rgba(106,68,38,0.04), transparent 10%);
  mix-blend-mode:multiply;
  opacity:0.98;
}

/* card — emulate a parchment sheet with torn edge; center preview as primary */
.card{
  width:100%;
  max-width:1200px;
  /* make the card slightly more translucent so the paper texture shows through */
  background: linear-gradient(180deg, rgba(255,250,236,0.72), rgba(245,236,200,0.52));
  box-shadow: var(--shadow-strong);
  border-radius:12px;
  display:flex;
  gap:28px;
  padding:28px;
  align-items:center;            /* center children vertically */
  justify-content:center;       /* keep center column visually dominant */
  min-height:calc(80vh);
  position:relative;
  z-index:1;
  overflow:visible;
  border:1px solid rgba(24,16,12,0.08);
}

/* torn edge effect (left) */
.card::before{
  content:'';
  position:absolute;
  left:-28px;
  top:12px;
  bottom:12px;
  width:40px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.00));
  box-shadow: inset 10px 0 36px rgba(0,0,0,0.06);
  border-radius:2px;
  transform:skewY(-2deg);
  background-image:
    radial-gradient(circle at 8px 20px, rgba(0,0,0,0.03) 0px, transparent 6px),
    linear-gradient(180deg, transparent 10%, rgba(0,0,0,0.03) 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 45%, black 100%);
}

/* ornamental corner flourish */
.card::after{
  content: "—";
  position:absolute;
  right:18px;
  top:12px;
  color:var(--accent-ornament);
  font-family: "IM Fell English", serif;
  font-size:64px;
  opacity:0.18;
  transform:rotate(-12deg);
  pointer-events:none;
}





/* Large background watermark that sits behind page content but doesn't intercept events */
.watermark{
  position:fixed;
  inset:0;
  z-index:0; /* behind card (card is z-index:1) */
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  font-family:"IM Fell English", serif;
  color:var(--ink);
  font-weight:800;
  font-size:clamp(88px, 20vw, 260px);
  opacity:0.06; /* very low so it doesn't cover content */
  transform:translateY(-4%); /* slight vertical offset to sit aesthetically behind card */
  text-transform:uppercase;
  letter-spacing:6px;
  -webkit-font-smoothing:antialiased;
  mix-blend-mode:multiply;
}

/* Page title — manuscript style */
.page-title{
  margin:0 0 6px 0;
  font-size:64px; /* enlarged for full visibility */
  line-height:1.02;
  font-weight:700;
  color:var(--ink);
  letter-spacing:0;
  font-family:"IM Fell English", serif;
  word-break:normal;
  white-space:normal;
  hyphens:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* responsive scale down for smaller screens */
@media (max-width:920px){
  .page-header{font-size:28px;padding:8px 12px;top:12px; animation-duration:6s;}
}
.subtitle{
  margin:0 0 18px 0;
  font-size:15px;
  color:var(--muted-ink);
  font-weight:500;
  font-style:italic;
}

/* Step cards — parchment panels */
.step-card{
  width:100%;
  /* make step cards a little more translucent so the background texture peeks through */
  background: linear-gradient(180deg, rgba(255,249,238,0.72), rgba(248,238,212,0.60));
  border-radius:12px;
  padding:18px;
  margin-bottom:14px;
  box-shadow:0 10px 30px rgba(18,12,8,0.06);
  border:1px solid rgba(36,26,16,0.12); /* stronger border */
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.step-number{
  flex-shrink:0;
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(138,75,47,0.18), rgba(138,75,47,0.08));
  color:#5a2a12; /* deeper contrast */
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:18px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.6);
  border:1px solid rgba(36,26,16,0.06);
}
.step-content{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
}
.step-content > strong{
  display:block;
  font-size:16px;
  color:var(--ink);
  margin-bottom:4px;
  font-weight:700;
}

/* side controls (now rendered beside the centered preview) */
.left.side-controls{flex:0 0 420px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:12px}
.left{flex:1;display:flex;flex-direction:column;gap:0;align-items:flex-start;padding:12px}
.drop{
  display:block;width:100%;
  /* less opaque drop background */
  background: linear-gradient(180deg, rgba(255,250,236,0.84), rgba(246,234,207,0.74));
  border:2px dashed rgba(36,26,16,0.12); /* darker dashed border */
  border-radius:12px;padding:16px;cursor:pointer;text-decoration:none;color:inherit;
  transition:all .18s ease;
  box-shadow: 0 8px 26px rgba(18,12,8,0.06); /* stronger */
}
.drop:hover{border-color:rgba(36,26,16,0.22);background:linear-gradient(180deg,#fff8ec,#f6ead0)}
.drop.dragover{border-color:rgba(138,75,47,0.42); box-shadow: 0 16px 48px rgba(36,26,16,0.08)}
.drop input{display:none}
.drop-inner{display:flex;flex-direction:column;gap:10px}
.thumb{
  display:flex;align-items:center;justify-content:center;min-height:240px;border-radius:10px;
  background:linear-gradient(180deg, rgba(255,248,236,0.72), rgba(251,244,226,0.60));
  color:var(--muted-ink);padding:10px;text-align:center;overflow:hidden;
  border:1px solid rgba(36,26,16,0.10); /* stronger edge */
}
.thumb canvas{border-radius:8px;display:block;box-shadow:0 6px 18px rgba(18,12,8,0.06)}
.thumb.empty{font-size:16px;font-weight:700;color:var(--muted-ink)}

/* controls — aged buttons */
.controls{display:flex;gap:12px;flex-wrap:wrap;margin-top:2px}
.btn{
  padding:12px 16px;border-radius:12px;border:1px solid rgba(36,26,16,0.12);
  background:linear-gradient(180deg,#fff7ea,#f6ead0);
  cursor:pointer;font-weight:800;color:var(--ink);letter-spacing:0.2px;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;
  box-shadow: 0 10px 26px rgba(18,12,8,0.06);
  font-family:"EB Garamond", serif;
  min-height:44px;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(18,12,8,0.10)}
.btn:active{transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.primary{
  background:linear-gradient(180deg,#e9d0b0,#d7b596); /* stronger primary color */
  color:#2b1206; /* high contrast text */
  border:none;box-shadow: 0 16px 36px rgba(122,57,31,0.12);
  font-size:18px;
}
.secondary{
  background:#fbf6ee;
  color:var(--muted-ink);
  border:1px solid rgba(36,26,16,0.12);
}

/* Selected slogan display — inked ribbon */
.selected-slogan{
  padding:12px 14px;
  background:linear-gradient(90deg, rgba(255,250,236,0.96), rgba(245,236,210,0.92));
  border-radius:8px;
  border:1px solid rgba(36,26,16,0.12);
  font-size:16px;
  color:var(--ink);
  font-style:italic;
  text-align:center;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* make menu button more prominent */
.slogan-btn{
  width:100%;
  font-size:18px;
  padding:14px;
  font-family:"EB Garamond", serif;
  background: linear-gradient(180deg,#fff7ec,#f2dec3);
  border:1px solid rgba(36,26,16,0.12);
  color:var(--ink);
  font-weight:800;
}

/* center preview column — visually dominant */
.center{display:flex;flex-direction:column;align-items:center;gap:14px;flex:0 0 auto}
/* preview wrapper now positioned so overlay title can sit on top of the bookmark */
.previewWrap{width:420px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}

/* overlay title placed above the bookmark preview */
.overlay-title{
  position:absolute;
  top:-12px; /* moved upward so the title sits more on top of the bookmark image */
  left:50%;
  transform:translateX(-50%);
  z-index:60;
  font-family:"IM Fell English", serif;
  font-size:56px;
  font-weight:700;
  color:var(--ink);
  /* lower alpha so the overlay is more translucent over the bookmark */
  background:rgba(255,250,236,0.48);
  padding:8px 14px;
  border-radius:10px;
  border:1px solid rgba(36,26,16,0.10);
  box-shadow:0 10px 30px rgba(18,12,8,0.06);
  pointer-events:none;
  letter-spacing:1px;
  text-transform:uppercase;
}

/* slightly smaller overlay on narrow screens */
@media (max-width:920px){
  .overlay-title{font-size:28px;top:-6px;padding:6px 10px}
  .previewWrap{width:100%;max-width:420px}
}
.previewLabel{font-size:16px;color:var(--muted-ink);font-weight:700}
.preview{
  width:360px;height:1080px;border-radius:12px; /* larger, central bookmark preview */
  /* make the preview background slightly translucent so foreground layers are lighter */
  background: linear-gradient(180deg, rgba(255,247,234,0.60), rgba(246,234,208,0.50));
  border:1px solid rgba(36,26,16,0.12);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow: 0 40px 90px rgba(18,12,8,0.12);
  transition:transform .16s ease, box-shadow .16s ease;
  position:relative;
  padding:12px;
}
.preview:before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent);
  pointer-events: none;
}
.preview img, .preview canvas{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px;filter:contrast(1.03) saturate(1.02)}
.preview.empty{color:var(--muted-ink);padding:14px;text-align:center;background:linear-gradient(180deg,#f8f3e8,#fff8ec)}

/* preview actions row */
.preview-actions{
  width:100%;
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:10px;
}
.preview-actions .btn{
  min-width:120px;
  padding:10px 12px;
  border-radius:10px;
  font-weight:800;
}

/* slogan menu — antique scroll (enlarged for readability)
   Reposition menu so it avoids the centered preview and anchors to the side controls. */
.slogan-menu{
  position:fixed;
  left:48px;                 /* keep it near side controls */
  top:120px;
  width:380px;
  max-height:70vh;
  display:block;
  z-index:120;
  pointer-events:auto;
  transition:transform .12s ease,opacity .12s ease;
  transform-origin: center top;
}

/* keep search full width inside the floating panel */
.slogan-search{
  width:100%;
  padding:14px 18px;
  border-radius:12px;
  border:1px solid rgba(36,26,16,0.16); /* stronger */
  background:rgba(255,248,236,0.72);
  font-size:22px; /* bigger for readability */
  font-family:inherit;
  margin-bottom:10px;
  transition:all .16s ease;
}
.slogan-search:focus{
  outline:none;
  border-color:rgba(122,57,31,0.48);
  box-shadow: 0 0 0 10px rgba(122,57,31,0.06);
}

/* larger, more readable custom slogan textarea */
.slogan-custom{
  height:160px;
  padding:16px 18px;
  font-size:22px; /* larger custom text */
  line-height:1.45;
  resize:vertical;
  border-radius:12px;
  border:1px solid rgba(36,26,16,0.12);
  background:rgba(255,248,236,0.72);
  box-shadow: 0 12px 28px rgba(18,12,8,0.06);
  font-family: inherit;
}
.slogan-actions{
  display:flex;
  gap:12px;
  width:100%;
  margin-bottom:12px;
}
.slogan-actions .btn{
  flex:1;
  font-size:16px; /* larger action buttons */
  padding:12px 14px;
}

/* menu content panel */
.slogan-list{
  position:relative;
  max-height:64vh;
  width:100%;
  overflow:auto;
  /* softer menu background so it floats gently above the paper */
  background:linear-gradient(180deg, rgba(255,248,236,0.72), rgba(251,244,226,0.60));
  border-radius:14px;
  border:1px solid rgba(36,26,16,0.12);
  box-shadow: 0 50px 120px rgba(18,12,8,0.14);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  z-index:110;
  font-size:22px; /* base font-size for items */
  animation: slideDown 0.22s cubic-bezier(.2,.9,.2,1);
  transform-origin: top center;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.slogan-item{
  justify-content:flex-start;
  padding:14px 18px;
  border-radius:10px;
  border:1px solid rgba(36,26,16,0.12);
  background:linear-gradient(180deg, rgba(255,248,236,0.72), rgba(255,246,232,0.60));
  font-weight:800;
  cursor:pointer;
  text-align:left;
  transition:all .12s ease;
  position:relative;
  overflow:hidden;
  font-size:20px; /* larger readable items */
  font-family:"EB Garamond", serif;
  color:var(--ink);
}
.slogan-item::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(90deg, rgba(122,57,31,0.06), transparent);
  opacity:0;
  transition:opacity .12s ease;
}
.slogan-item:hover{
  background:linear-gradient(90deg, rgba(255,250,236,1), rgba(255,248,236,1));
  transform:translateY(-3px);
  box-shadow: 0 12px 36px rgba(18,12,8,0.10);
  border-color:rgba(36,26,16,0.18);
}
.slogan-item:hover::before{opacity:1}
.slogan-item:active{
  transform:translateY(0) scale(0.995);
}

/* footer — small penciled note */
.footer{
  position:fixed;left:0;right:0;bottom:18px;text-align:center;font-size:13px;color:var(--muted-ink);z-index:1;
  font-family:"EB Garamond", serif;
  opacity:0.95;
}

/* responsiveness */
@media (max-width:920px){
  .card{flex-direction:column;min-height:calc(100vh - 56px);padding:16px}
  .right{width:100%}
  .preview{width:220px;height:560px}
  .slogan-list{width:calc(100vw - 48px);max-width:480px}
  .page-title{font-size:32px} /* larger mobile title so it remains readable and visible */
  .step-card{padding:14px}
}