/* Shared hero/navigation surfaces keep each destination visually consistent. */
:root{
  --pt-search-surface:radial-gradient(ellipse at 90% 0%,rgba(50,210,222,.3),transparent 52%),linear-gradient(120deg,#112843,#303b86 58%,#6350ae);
  --pt-upload-surface:linear-gradient(125deg,#172554 0%,#4338ca 48%,#a43ad1 100%);
  --pt-favorites-surface:linear-gradient(125deg,#451a53 0%,#8b3f86 54%,#f06d9f 100%);
  --pt-history-surface:linear-gradient(125deg,#102a43 0%,#176b87 53%,#27b9c7 100%);
}
/* Rich page introductions for personal libraries and upload. */
.personal-page-hero{
  position:relative;
  isolation:isolate;
  min-height:150px;
  margin-bottom:18px;
  padding:28px 30px;
  border-radius:28px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  color:#fff;
  box-shadow:0 18px 44px rgba(15,23,42,.13);
}
.personal-page-hero::before,
.personal-page-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
}
.personal-page-hero::before{
  width:260px;
  height:260px;
  right:7%;
  top:-145px;
  background:rgba(255,255,255,.12);
}
.personal-page-hero::after{
  width:180px;
  height:180px;
  right:-38px;
  bottom:-108px;
  background:rgba(255,255,255,.09);
}
.personal-page-hero-favorites{background:var(--pt-favorites-surface)}
.personal-page-hero-history{background:var(--pt-history-surface)}
.personal-page-kicker{
  display:block;
  margin-bottom:8px;
  color:rgba(255,255,255,.7);
  font-size:11px;
  font-weight:900;
  letter-spacing:.19em;
}
.personal-page-hero h2{margin:0 0 9px;font-size:34px;line-height:1;font-weight:950}
.personal-page-hero p{margin:0;max-width:680px;color:rgba(255,255,255,.76);font-size:14px;line-height:1.65}
.personal-page-hero-art{display:flex;align-items:center;gap:15px;padding-right:12px}
.personal-page-hero-symbol{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:24px;
  background:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 13px 28px rgba(10,15,30,.15);
  font-size:39px;
  font-weight:400;
  backdrop-filter:blur(10px);
}
.personal-page-hero-dots{display:grid;gap:7px}
.personal-page-hero-dots span{display:block;width:10px;height:10px;border-radius:50%;background:#fff}
.personal-page-hero-dots span:nth-child(1){opacity:.95}
.personal-page-hero-dots span:nth-child(2){opacity:.62}
.personal-page-hero-dots span:nth-child(3){opacity:.3}

body[data-page="upload"] .upload-banner{
  position:relative;
  isolation:isolate;
  min-height:200px;
  padding:30px 34px;
  border-radius:30px;
  overflow:hidden;
  align-items:stretch;
  gap:30px;
  background:var(--pt-upload-surface);
  box-shadow:0 20px 48px rgba(51,43,160,.2);
}
body[data-page="upload"] .upload-banner::before,
body[data-page="upload"] .upload-banner::after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
}
body[data-page="upload"] .upload-banner::before{
  width:290px;
  height:290px;
  right:19%;
  top:-205px;
  background:#21d4d9;
  opacity:.42;
}
body[data-page="upload"] .upload-banner::after{
  width:230px;
  height:230px;
  right:-70px;
  bottom:-165px;
  background:#ffd64a;
  opacity:.55;
}
.upload-banner-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;max-width:760px}
body[data-page="upload"] .upload-banner .section-kicker{color:#67e8f9}
body[data-page="upload"] .upload-banner h2{margin-top:7px;font-size:35px;line-height:1.08}
.upload-banner-lead{margin:11px 0 0;color:rgba(255,255,255,.74);font-size:14px;line-height:1.6}
.upload-banner-features{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.upload-banner-features span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 11px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.11);
  color:#fff;
  font-size:11px;
  font-weight:850;
  backdrop-filter:blur(8px);
}
.upload-banner-flow{display:grid;grid-template-columns:repeat(3,minmax(90px,1fr));gap:10px;align-self:center;width:min(470px,42%)}
.upload-flow-card{
  min-height:116px;
  padding:15px;
  border-radius:20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 14px 30px rgba(15,23,42,.16);
  transform:rotate(-2deg);
}
.upload-flow-card:nth-child(2){transform:translateY(11px) rotate(2deg)}
.upload-flow-card:nth-child(3){transform:rotate(-1deg)}
.upload-flow-card b{font-size:28px;line-height:1;font-weight:950}
.upload-flow-card span{font-size:11px;font-weight:950;letter-spacing:.08em}
.upload-flow-photo{background:#67e8f9;color:#12304c}
.upload-flow-video{background:#f9a8d4;color:#4a1735}
.upload-flow-tag{background:#fde047;color:#392f0b}
body[data-page="upload"] .upload-step{display:none}

body[data-page="upload"] .upload-mode-chooser{background:rgba(255,255,255,.9)}
body[data-page="upload"] .upload-method-card{position:relative;isolation:isolate;overflow:hidden;border-width:1px;background:#fff}
body[data-page="upload"] .upload-method-card::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:170px;
  height:170px;
  right:-65px;
  bottom:-95px;
  border-radius:50%;
  opacity:.55;
}
body[data-page="upload"] .upload-method-photo{
  border-color:#b9e8ef;
  background:linear-gradient(145deg,#effcff 0%,#f5f3ff 100%);
}
body[data-page="upload"] .upload-method-photo::after{background:#5ee0e8}
body[data-page="upload"] .upload-method-photo .upload-method-icon{background:linear-gradient(135deg,#0284c7,#22c9d6)}
body[data-page="upload"] .upload-method-video{
  border-color:#f2c7dd;
  background:linear-gradient(145deg,#fff4f8 0%,#fff9e8 100%);
}
body[data-page="upload"] .upload-method-video::after{background:#f472b6}
body[data-page="upload"] .upload-method-video .upload-method-icon{background:linear-gradient(135deg,#db2777,#f59e0b)}

@media(max-width:900px){
  body[data-page="upload"] .upload-banner{min-height:auto;display:block;padding:25px}
  .upload-banner-flow{width:100%;margin-top:23px}
  .upload-flow-card{min-height:82px}
}
@media(max-width:760px){
  .personal-page-hero{min-height:118px;padding:22px 20px;border-radius:22px}
  .personal-page-hero h2{font-size:28px}
  .personal-page-hero p{font-size:13px}
  .personal-page-hero-symbol{width:58px;height:58px;border-radius:19px;font-size:30px}
  .personal-page-hero-dots{display:none}
  body[data-page="upload"] .upload-banner{padding:22px 20px;border-radius:23px}
  body[data-page="upload"] .upload-banner h2{font-size:29px}
  .upload-banner-lead{font-size:13px}
  .upload-banner-flow{gap:7px}
  .upload-flow-card{min-height:74px;padding:11px;border-radius:16px;transform:none!important}
  .upload-flow-card:nth-child(2){transform:translateY(7px)!important}
  .upload-flow-card b{font-size:22px}
  .upload-flow-card span{font-size:9px}
}
@media(max-width:480px){
  .personal-page-hero-art{display:none}
  .upload-banner-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* v2.03.33: a visual index motif, built from CSS rather than bitmap artwork. */
body[data-page="search"] .search-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:210px;
  padding:30px 34px;
  gap:30px;
  border-radius:28px;
  background:var(--pt-search-surface);
  box-shadow:0 18px 44px rgba(30,50,100,.18);
}
.search-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(90deg,transparent,#000);
  pointer-events:none;
}
.search-hero-copy{min-width:0;max-width:680px;flex:1}
.search-hero .search-banner-kicker{color:#8de9ee;font-size:10px;letter-spacing:.2em}
.search-hero h2{margin:12px 0 10px;font-size:clamp(27px,3vw,38px);line-height:1.2;color:#fff}
.search-hero p{margin:0;max-width:570px;color:#d7e0f4;font-size:14px;line-height:1.7}
.search-hero-palette{display:flex;align-items:center;gap:6px;margin-top:20px}
.search-hero-palette span{width:28px;height:7px;border-radius:9px;background:#67e8f9}
.search-hero-palette span:nth-child(2){background:#f9a8d4}
.search-hero-palette span:nth-child(3){background:#fde047}
.search-hero-palette i{width:76px;height:1px;background:rgba(255,255,255,.3);margin-left:8px}
.search-hero-art{position:relative;flex:0 0 220px;height:162px;margin-right:8px}
.search-hero-frame{position:absolute;width:124px;height:145px;border:1px solid rgba(255,255,255,.5);border-radius:15px;box-shadow:0 14px 25px rgba(8,20,50,.25)}
.search-hero-frame-back{left:22px;top:0;transform:rotate(-14deg);background:linear-gradient(145deg,#78dfe0,#6273c5 66%,#e2a1c5)}
.search-hero-frame-front{right:13px;top:8px;transform:rotate(10deg);background:radial-gradient(circle at 66% 28%,#f7d59b 0 12%,transparent 13%),linear-gradient(155deg,#9fd8dc,#746dba 49%,#30345e 50%);overflow:hidden}
.search-hero-focus{position:absolute;inset:24px 18px 36px;border:1px solid rgba(255,255,255,.7);border-radius:7px}
.search-hero-focus::before,.search-hero-focus::after{content:"";position:absolute;background:rgba(255,255,255,.7);left:50%;top:50%;transform:translate(-50%,-50%)}
.search-hero-focus::before{width:16px;height:1px}
.search-hero-focus::after{width:1px;height:16px}
.search-hero-frame-caption{position:absolute;bottom:12px;left:14px;font-size:8px;font-weight:800;letter-spacing:.1em;color:#fff}
.search-hero-label{position:absolute;left:0;bottom:4px;padding:7px 10px;border-radius:8px;background:#f3dc85;color:#3e3650;font-size:9px;font-weight:900;letter-spacing:.08em;transform:rotate(-5deg);box-shadow:0 5px 14px rgba(0,0,0,.14)}
@media(max-width:760px){
  body[data-page="search"] .search-hero{min-height:180px;padding:24px 20px;border-radius:22px;gap:8px}
  .search-hero-copy{position:relative;z-index:1}
  .search-hero h2{font-size:27px}
  .search-hero p{font-size:12px;max-width:100%}
  .search-hero-art{position:absolute;right:-60px;top:-7px;transform:scale(.8);opacity:.16;pointer-events:none}
  .search-hero-label{display:none}
  .search-hero-palette{margin-top:17px}
}