@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800&family=Nunito:wght@500;600;700;800&display=swap");
600&display=swap");
600;700;800;900&family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap");
*{box-sizing:border-box}body{margin:0;background:#fff9fa;color:#453a3e;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.container{width:min(1120px,calc(100% - 28px));margin:0 auto;padding:26px 0 60px}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:13px max(18px,calc((100vw - 1120px)/2));border-bottom:1px solid #eddde1;background:rgba(255,249,250,.94);backdrop-filter:blur(15px)}.brand{font:700 22px Georgia,serif}.topbar nav{display:flex;gap:13px;overflow-x:auto}.topbar nav a{font-size:12px;font-weight:750;white-space:nowrap}.card{border:1px solid #ecdde1;border-radius:18px;background:#fff;box-shadow:0 8px 28px rgba(77,47,57,.06)}.primary{display:inline-flex;justify-content:center;align-items:center;padding:10px 16px;border:0;border-radius:999px;color:#fff;background:#d46f88;font-weight:800;cursor:pointer}.hero,.story-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:10px 0 22px}.hero h1,.story-hero h1{margin:0;font:700 42px Georgia,serif}.hero p,.story-hero p{margin:5px 0;color:#8a757c;font-style:italic}.flash{margin:0 0 14px;padding:12px 15px;border-radius:12px;background:#eaf8ee}.flash.error{background:#fff0f0;color:#a33}.login-card{width:min(430px,100%);margin:9vh auto;padding:34px;text-align:center}.login-icon{width:90px;border-radius:22px}.login-card h1{font:700 35px Georgia,serif}.login-card p{color:#8a757c;font-style:italic}.stack{display:grid;gap:14px}.stack label{display:grid;gap:6px;text-align:left;font-weight:700}.stack input,.stack textarea,.stack select,.inline-form input{width:100%;padding:11px;border:1px solid #dfced3;border-radius:11px;background:#fff}.composer{width:min(760px,100%);margin:0 auto;padding:24px}.type-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px}.type-switch label{display:flex;justify-content:center;padding:12px;border:1px solid #dfced3;border-radius:12px;background:#faf7f8;cursor:pointer}.type-switch label:has(input:checked){color:#fff;background:#d46f88}.template-guide,.outfit-fields{padding:15px;border:1px solid #e1d5df;border-radius:14px;background:#faf8ff}.outfit-fields{display:grid;gap:12px}.outfit-fields[hidden]{display:none}.existing-photos{display:flex;gap:8px;overflow:auto}.existing-photos img{width:100px;height:100px;object-fit:cover;border-radius:10px}.filterbar{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:9px 10px;margin-bottom:20px;border:1px solid #ecdde1;border-radius:14px;background:#fff}.filterbar .authors{display:flex;gap:6px}.filterbar .authors a{padding:7px 11px;border:1px solid #e0d2d6;border-radius:999px;white-space:nowrap;font-size:12px;font-weight:800}.filterbar .authors a.active{color:#fff;background:#d46f88}.filterbar i{width:1px;height:25px;background:#e0d2d6}.filterbar label{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:11px;font-weight:800;color:#7d6d72}.filterbar select{height:33px;min-width:98px;padding:0 26px 0 9px;border:1px solid #dfced3;border-radius:9px;background:#fff}.feed{display:grid;gap:20px;width:min(780px,100%);margin:auto}.post{padding:18px}.post header{display:flex;justify-content:space-between;gap:12px}.post header time{display:block;color:#987e87;font-size:11px}.inline{display:inline}.link{padding:0;border:0;background:none;color:#0063dc;cursor:pointer}.danger{color:#b44}.badge{display:inline-flex;margin-top:10px;padding:3px 7px;border-radius:999px;background:#111;color:#fff;font-size:9px;font-weight:900}.post h2{margin:8px 0 12px}.carousel{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory}.carousel figure{flex:0 0 100%;margin:0;scroll-snap-align:start}.carousel img{display:block;width:100%;max-height:680px;object-fit:contain;border-radius:13px;background:#f3edef}.carousel figcaption{padding:7px;color:#7b6870;font-size:12px}.body{line-height:1.75}.chips,.tags{display:flex;flex-wrap:wrap;gap:6px}.chips span{padding:4px 8px;border-radius:999px;background:#f1ebed;font-size:10px}.tags span{color:#0063dc;font-size:12px}.liked{color:#d46f88}.comments{margin-top:12px;padding-top:10px;border-top:1px solid #eee}.comments p{margin:6px 0;font-size:13px}.comment-form{display:flex;gap:7px}.comment-form input{flex:1;padding:8px;border:1px solid #e0d2d6;border-radius:9px}.comment-form button{border:0;border-radius:9px;background:#f1ebed}.mode-switch{display:flex;padding:4px;border:1px solid #e0d2d6;border-radius:999px;background:#fff}.mode-switch a{padding:8px 14px;border-radius:999px;font-size:12px;font-weight:800}.mode-switch a.active{color:#fff;background:#d46f88}.timeline{display:grid;gap:15px;width:min(850px,100%);margin:auto}.story-card{display:grid;grid-template-columns:180px 1fr;overflow:hidden}.story-card img,.story-card .placeholder{width:180px;height:150px;object-fit:cover}.placeholder{display:grid;place-items:center;background:#f7eef1;font-size:35px}.story-card>div:last-child{padding:16px}.story-card h2{margin:4px 0}.story-card small{color:#0063dc;font-weight:900}.story-card time{margin-left:8px;color:#d46f88;font-size:12px}.year{font:700 34px Georgia,serif}.look-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.look-card{overflow:hidden}.look-card>img{width:100%;aspect-ratio:4/5;object-fit:cover}.look-card>div{padding:14px}.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}.album-card{padding:18px}.inline-form{display:flex;gap:8px}@media(max-width:700px){.topbar{align-items:flex-start}.topbar nav{max-width:62vw}.hero,.story-hero{display:grid}.hero h1,.story-hero h1{font-size:34px}.filterbar{padding:7px}.story-card{grid-template-columns:105px 1fr}.story-card img,.story-card .placeholder{width:105px;height:135px}.look-grid,.album-grid{grid-template-columns:1fr}.type-switch{grid-template-columns:1fr}.inline-form{display:grid}}
.hero-actions{display:flex;align-items:center;gap:10px}.view-switch{display:flex;padding:4px;border:1px solid #e0d2d6;border-radius:999px;background:#fff}.view-switch a{padding:8px 13px;border-radius:999px;font-size:11px;font-weight:850}.view-switch a.active{color:#fff;background:#d46f88}
.grid-cover-link{display:none}
.photo-grid{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.photo-grid .post{position:relative;overflow:hidden;padding:0;border-radius:4px;box-shadow:none;aspect-ratio:1/1;background:#f2edef}
.photo-grid .post>header,.photo-grid .post>h2,.photo-grid .post>.badge,.photo-grid .post>.chips,.photo-grid .post>.body,.photo-grid .post>.tags,.photo-grid .post>footer,.photo-grid .post>.comments{display:none}
.photo-grid .post>.carousel{height:100%;overflow:hidden}
.photo-grid .post>.carousel figure{display:none;flex-basis:100%;height:100%}
.photo-grid .post>.carousel figure:first-child{display:block}
.photo-grid .post>.carousel img{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0;transition:transform .25s ease}
.photo-grid .post:hover>.carousel img{transform:scale(1.025)}
.photo-grid .post:not(:has(.carousel)){display:grid;place-items:center;padding:20px;background:linear-gradient(145deg,#f8e9ee,#f0e8f4)}
.photo-grid .post:not(:has(.carousel)) h2{display:block;text-align:center;font-family:Georgia,serif}
.photo-grid .grid-cover-link{display:block;position:absolute;inset:0;z-index:5}
.photo-stream{display:grid;gap:20px;width:min(780px,100%);margin:auto}
@media(max-width:700px){.hero-actions{align-items:stretch;justify-content:space-between}.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.view-switch a{padding:8px 10px}.photo-grid .post{border:0}.photo-grid .post:not(:has(.carousel)){padding:6px}.photo-grid .post:not(:has(.carousel)) h2{font-size:11px}}

/* 4-column grid cache-fix */
.photo-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
@media(max-width:700px){
  .photo-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Grid metadata overlay */
.photo-grid .grid-meta{
  display:flex !important;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:4;
  flex-direction:column;
  gap:2px;
  padding:34px 10px 9px;
  color:#fff;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.78));
  pointer-events:none;
}
.photo-grid .grid-meta time{
  font-size:10px;
  opacity:.9;
}
.photo-grid .grid-meta strong{
  overflow:hidden;
  font-size:13px;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.photo-grid .grid-meta span{
  font-size:10px;
  opacity:.92;
}
.photo-stream .grid-meta{
  display:none;
}
@media(max-width:700px){
  .photo-grid .grid-meta{
    padding:25px 6px 6px;
  }
  .photo-grid .grid-meta time{
    font-size:8px;
  }
  .photo-grid .grid-meta strong{
    font-size:10px;
  }
  .photo-grid .grid-meta span{
    font-size:8px;
  }
}

/* Japanese quick post composer */
.quick-main-button{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border:1px solid #d46f88;border-radius:999px;color:#c75e79;background:#fff;font-size:12px;font-weight:850}
.quick-compose{width:min(680px,100%);margin:24px auto;padding:22px}
.quick-compose-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.quick-compose-head small{display:block;margin-top:3px;color:#8a757c}
.quick-avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:#fff;background:#d46f88;font-size:20px;font-weight:850}
.quick-form textarea{width:100%;padding:14px 4px;border:0;border-bottom:1px solid #eadde1;outline:0;resize:vertical;background:transparent;font-size:20px;line-height:1.65}
.quick-toolbar{display:flex;align-items:center;gap:10px;margin-top:12px}
.quick-photo-button{padding:8px 11px;border-radius:999px;color:#c75e79;background:#fff0f4;font-size:12px;font-weight:850;cursor:pointer}
.quick-date{display:flex;align-items:center;gap:5px;color:#77666c;font-size:11px;font-weight:750}
.quick-date input{padding:6px;border:1px solid #dfced3;border-radius:8px}
.quick-count{margin-left:auto;color:#948087;font-size:11px}
.quick-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}
.quick-preview img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px}
@media(max-width:700px){
  .quick-compose{padding:17px}
  .quick-form textarea{font-size:18px}
  .quick-toolbar{flex-wrap:wrap}
  .quick-count{margin-left:0}
  .quick-toolbar .primary{margin-left:auto}
  .hero-actions{flex-wrap:wrap}
}

/* Bilingual cute theme */
:root{
  --milk:#fffdfc;
  --blush:#f5d9e2;
  --rose:#c86f88;
  --rose-deep:#a7546c;
  --lavender:#eee8f7;
  --ink:#4d4146;
  --muted:#8f7d84;
  --line:#eadde3;
}
body{
  background:
    radial-gradient(circle at 12% 8%,rgba(245,217,226,.42),transparent 28%),
    radial-gradient(circle at 88% 18%,rgba(238,232,247,.46),transparent 30%),
    var(--milk);
  color:var(--ink);
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  letter-spacing:.01em;
}
.brand,.hero h1,.story-hero h1,.login-card h1,.year{
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS","Hiragino Maru Gothic ProN",cursive;
  letter-spacing:.03em;
}
.topbar{
  border-color:rgba(220,197,205,.85);
  background:rgba(255,253,252,.88);
  box-shadow:0 5px 24px rgba(92,65,76,.06);
}
.topbar nav{align-items:center;gap:8px}
.topbar nav a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:58px;
  padding:7px 8px;
  border-radius:14px;
  transition:.18s ease;
}
.topbar nav a:hover{
  background:linear-gradient(135deg,#fff0f4,#f4effb);
  transform:translateY(-1px);
}
.topbar nav a span{
  font-family:"Trebuchet MS","Segoe UI",sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:.03em;
}
.topbar nav a small{
  margin-top:1px;
  color:var(--muted);
  font-size:8px;
  font-weight:700;
}
.card{
  border-color:var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 36px rgba(94,63,76,.08);
}
.primary{
  background:linear-gradient(135deg,#d9859c,#bf6e8b);
  box-shadow:0 8px 20px rgba(190,102,133,.22);
}
.primary small,.quick-main-button small,.view-switch small{
  display:block;
  margin-left:4px;
  font-size:8px;
  opacity:.85;
}
.hero p,.story-hero p,.login-card p{
  color:var(--muted);
  font-family:"Trebuchet MS","Yu Gothic UI",sans-serif;
}
.hero p small,.story-hero p small{
  display:inline-block;
  margin-top:5px;
  color:#9f8991;
  font-style:normal;
  font-size:11px;
}
.hero-actions{gap:8px}
.quick-main-button{
  border-color:#ddb8c5;
  color:var(--rose-deep);
  background:linear-gradient(135deg,#fff5f8,#f6f1fb);
}
.view-switch{
  border-color:#e1d3dc;
  background:rgba(255,255,255,.92);
}
.view-switch a{
  display:flex;
  align-items:center;
  gap:3px;
}
.view-switch a.active{
  background:linear-gradient(135deg,#ce7e96,#b76e8a);
}
.filterbar{
  border-color:var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.9);
  box-shadow:0 8px 22px rgba(94,63,76,.05);
}
.photo-grid .post{
  border-radius:12px;
  box-shadow:0 8px 18px rgba(83,58,68,.09);
}
.photo-grid .grid-meta{
  background:linear-gradient(to bottom,transparent,rgba(46,35,41,.78));
}
.photo-grid .grid-meta strong{
  font-family:"Trebuchet MS","Yu Gothic UI",sans-serif;
}
.quick-compose{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,246,250,.96));
}
.quick-compose h2 small,.album-grid h1 small,.look-grid h1 small{
  display:block;
  color:var(--muted);
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic UI",sans-serif;
  font-size:12px;
}
.quick-avatar{
  background:linear-gradient(135deg,#d9859c,#b97898);
  box-shadow:0 6px 16px rgba(189,104,139,.24);
}
.quick-form textarea{
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic UI",sans-serif;
}
.quick-photo-button{
  color:var(--rose-deep);
  background:#fff0f5;
}
.badge{
  background:linear-gradient(135deg,#5d4a57,#86718a);
}
.tags span,.story-card small{color:#9e6284}
.mode-switch a.active{background:linear-gradient(135deg,#ce7e96,#b76e8a)}
@media(max-width:700px){
  .topbar nav a{min-width:52px;padding:6px}
  .topbar nav a span{font-size:10px}
  .topbar nav a small{font-size:7px}
  .hero-actions{gap:6px}
}

/* Little couple bear */
.couple-bear{
  position:fixed;
  left:22px;
  bottom:20px;
  z-index:8;
  width:118px;
  padding:10px 10px 8px;
  border:1px solid rgba(224,199,207,.9);
  border-radius:24px;
  background:rgba(255,253,252,.88);
  box-shadow:0 10px 28px rgba(94,63,76,.10);
  backdrop-filter:blur(10px);
  text-align:center;
  pointer-events:none;
}
.couple-bear svg{display:block;width:82px;height:82px;margin:0 auto}
.bear-ear,.bear-head,.bear-body,.bear-paw{
  fill:#d9b28f;
  stroke:#8e6c57;
  stroke-width:3;
}
.bear-muzzle{fill:#f5ddc5;stroke:#8e6c57;stroke-width:2}
.bear-eye,.bear-nose{fill:#5c473c}
.bear-mouth{fill:none;stroke:#5c473c;stroke-width:3;stroke-linecap:round}
.bear-heart{fill:#e88ba3;stroke:#b86680;stroke-width:2}
.bear-hearts{
  position:absolute;
  top:5px;
  right:8px;
  color:#df7f99;
  font-family:"Segoe Print","Bradley Hand",cursive;
  font-size:15px;
  transform:rotate(-7deg);
}
.bear-copy strong,.bear-copy span{
  display:block;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
}
.bear-copy strong{font-size:13px;color:#654f58}
.bear-copy span{margin-top:1px;font-size:11px;color:#a36a7e}
@media(max-width:900px){
  .couple-bear{
    left:10px;
    bottom:10px;
    width:74px;
    padding:6px;
    border-radius:18px;
    opacity:.92;
  }
  .couple-bear svg{width:48px;height:48px}
  .bear-copy strong{font-size:9px}
  .bear-copy span{font-size:8px}
  .bear-hearts{font-size:10px}
}
@media(max-width:520px){
  .couple-bear{
    left:auto;
    right:8px;
    bottom:8px;
    width:58px;
    padding:4px;
  }
  .couple-bear svg{width:40px;height:40px}
  .bear-copy strong{font-size:7px}
  .bear-copy span{display:none}
}

/* Desktop sidebar + mobile bottom navigation */
body{min-height:100vh}
.container{
  width:auto;
  max-width:none;
  margin-left:280px;
  padding:28px 30px 70px;
}
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  z-index:30;
  display:flex;
  flex-direction:column;
  width:260px;
  padding:28px 18px 24px;
  border-right:1px solid rgba(230,211,218,.9);
  background:rgba(255,252,250,.96);
  box-shadow:8px 0 30px rgba(87,61,72,.05);
  backdrop-filter:blur(14px);
}
.sidebar-brand{padding:2px 18px 24px;border-bottom:1px solid #eee2e6}
.sidebar-brand .brand{
  display:block;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-size:25px;
  font-weight:700;
  letter-spacing:.02em;
}
.sidebar-brand small{
  display:block;
  margin-top:4px;
  color:#786b70;
  font-family:"Trebuchet MS",sans-serif;
  font-size:11px;
  letter-spacing:.07em;
}
.side-nav{display:grid;gap:8px;margin-top:18px}
.side-nav a,.side-logout{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:18px;
  transition:.18s ease;
}
.side-nav a:hover,.side-logout:hover{
  background:linear-gradient(135deg,#ffeef3,#f7f1fb);
  transform:translateX(2px);
}
.side-nav a:first-child{
  background:linear-gradient(135deg,#ffdbe5,#f7dbe5);
}
.side-nav b,.side-logout b{
  width:30px;
  color:#3f363a;
  font-size:25px;
  font-weight:400;
  text-align:center;
}
.side-nav span,.side-logout span{
  display:flex;
  flex-direction:column;
  font-family:"Trebuchet MS","Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.15;
}
.side-nav small,.side-logout small{
  margin-top:4px;
  color:#65595e;
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic UI",sans-serif;
  font-size:11px;
}
.side-logout{
  margin-top:auto;
  border-top:1px solid #eee2e6;
  border-radius:0;
  padding-top:20px;
}
.mobile-header,.mobile-bottom-nav{display:none}

.hero{
  align-items:center;
  margin-top:0;
}
.hero h1{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size:48px;
}
.hero h1 em{
  color:#ef819b;
  font-style:normal;
}
.hero h1 small{
  color:#51454a;
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic UI",sans-serif;
  font-size:19px;
  font-weight:700;
}
.photo-grid{
  gap:14px;
}
.photo-grid .post{
  border-radius:12px;
}
.filterbar{
  margin-top:6px;
}
.couple-bear{
  left:56px;
  bottom:18px;
  width:150px;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}
.couple-bear svg{
  width:105px;
  height:105px;
}
.bear-copy strong{font-size:16px}
.bear-copy span{font-size:13px}

@media(max-width:980px){
  .sidebar{width:220px}
  .container{margin-left:220px;padding-inline:20px}
  .couple-bear{left:38px;width:140px}
}

@media(max-width:760px){
  .sidebar{display:none}
  .container{
    width:100%;
    margin-left:0;
    padding:92px 12px 92px;
  }
  .mobile-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:40;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:74px;
    border-bottom:1px solid #eadde3;
    background:rgba(255,252,250,.96);
    backdrop-filter:blur(14px);
  }
  .mobile-header .brand{
    font-size:20px;
  }
  .mobile-header small{
    margin-top:2px;
    color:#786b70;
    font-size:9px;
  }
  .mobile-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:45;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:end;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    border-top:1px solid #eadde3;
    background:rgba(255,252,250,.98);
    box-shadow:0 -8px 28px rgba(87,61,72,.08);
  }
  .mobile-bottom-nav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    min-width:0;
    font-size:10px;
  }
  .mobile-bottom-nav b{
    font-size:22px;
    font-weight:500;
  }
  .mobile-bottom-nav span{
    display:flex;
    flex-direction:column;
    align-items:center;
    line-height:1.05;
  }
  .mobile-bottom-nav small{
    margin-top:2px;
    font-size:7px;
  }
  .mobile-bottom-nav .mobile-add{
    align-self:center;
    justify-self:center;
    width:58px;
    height:58px;
    margin-top:-28px;
    border-radius:50%;
    color:#fff;
    background:linear-gradient(135deg,#ef91a6,#e87593);
    box-shadow:0 8px 22px rgba(224,109,143,.35);
  }
  .mobile-bottom-nav .mobile-add b{
    font-size:34px;
    line-height:54px;
  }
  .hero{
    display:grid;
    gap:14px;
  }
  .hero h1{
    font-size:36px;
  }
  .hero h1 small{
    font-size:15px;
  }
  .hero-actions{
    width:100%;
  }
  .photo-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:4px;
  }
  .photo-grid .post{
    border-radius:7px;
  }
  .filterbar{
    overflow-x:auto;
  }
  .couple-bear{
    display:none;
  }
}
@media(max-width:480px){
  .photo-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  .photo-grid .grid-meta{
    display:none !important;
  }
}

/* Same cute fonts across PC and mobile */
:root{
  --cute-en:"Nunito","Arial Rounded MT Bold",sans-serif;
  --cute-ja:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
}
html,body,button,input,textarea,select{
  font-family:var(--cute-ja) !important;
}
.brand,
.sidebar-brand .brand,
.mobile-header .brand,
.hero h1,
.story-hero h1,
.login-card h1,
.year,
.bear-copy strong,
.bear-copy span{
  font-family:var(--cute-en) !important;
  font-style:normal !important;
  font-weight:800;
  letter-spacing:.02em;
}
.side-nav span,
.side-footer span,
.topbar nav a span,
.view-switch a,
.quick-main-button,
.primary,
.grid-meta strong,
.story-card h2,
.look-card h2,
.mobile-bottom-nav span{
  font-family:var(--cute-en) !important;
}
.side-nav small,
.side-footer small,
.topbar nav a small,
.mobile-bottom-nav small,
.hero h1 small,
.story-hero h1 small,
.hero p small,
.story-hero p small,
.grid-meta time,
.grid-meta span{
  font-family:var(--cute-ja) !important;
}

/* Backup directly above Logout */
.side-footer{
  display:grid;
  gap:4px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid #eee2e6;
}
.side-backup,
.side-logout{
  display:flex;
  align-items:center;
  gap:14px;
  padding:11px 14px;
  border-radius:18px;
  transition:.18s ease;
}
.side-backup:hover,
.side-logout:hover{
  background:linear-gradient(135deg,#ffeef3,#f7f1fb);
  transform:translateX(2px);
}
.side-backup b,
.side-logout b{
  width:30px;
  color:#3f363a;
  font-size:25px;
  font-weight:400;
  text-align:center;
}
.side-backup span,
.side-logout span{
  display:flex;
  flex-direction:column;
  font-size:16px;
  line-height:1.15;
}
.side-backup small,
.side-logout small{
  margin-top:4px;
  color:#65595e;
  font-size:11px;
}
.side-logout{
  margin-top:0;
  padding-top:11px;
  border-top:0;
  border-radius:18px;
}

@media(max-width:760px){
  .mobile-header .brand{
    font-family:var(--cute-en) !important;
    font-weight:800;
  }
  .mobile-bottom-nav span{
    font-family:var(--cute-en) !important;
    font-weight:800;
  }
  .mobile-bottom-nav small{
    font-family:var(--cute-ja) !important;
    font-weight:700;
  }
}

/* Preview-image style font: thin handwritten Japanese + English */
:root{
  --preview-hand:"Klee One","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}
html,
body,
button,
input,
textarea,
select,
.brand,
.sidebar-brand .brand,
.mobile-header .brand,
.hero h1,
.story-hero h1,
.login-card h1,
.year,
.side-nav span,
.side-footer span,
.side-nav small,
.side-footer small,
.view-switch a,
.quick-main-button,
.primary,
.grid-meta strong,
.grid-meta time,
.grid-meta span,
.story-card h2,
.look-card h2,
.mobile-bottom-nav span,
.mobile-bottom-nav small,
.bear-copy strong,
.bear-copy span{
  font-family:var(--preview-hand) !important;
}
body{
  font-weight:400;
}
.brand,
.sidebar-brand .brand,
.mobile-header .brand,
.hero h1,
.story-hero h1,
.login-card h1,
.year{
  font-weight:600 !important;
  letter-spacing:.025em;
}
.side-nav span,
.side-footer span,
.view-switch a,
.quick-main-button,
.primary,
.mobile-bottom-nav span{
  font-weight:600 !important;
}
.side-nav small,
.side-footer small,
.mobile-bottom-nav small,
.hero h1 small,
.story-hero h1 small,
.hero p small,
.story-hero p small{
  font-weight:400 !important;
}
.sidebar-brand .brand{
  font-size:25px;
}
.hero h1{
  font-size:48px;
}
@media(max-width:760px){
  .mobile-header .brand{
    font-size:21px;
    font-weight:600 !important;
  }
}

/* Readable cute font theme */
:root{
  --font-en:"Nunito","Arial Rounded MT Bold","Segoe UI",sans-serif;
  --font-ja:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  --text-main:#44383d;
  --text-sub:#77666d;
}
html,body,button,input,textarea,select{
  font-family:var(--font-ja) !important;
  color:var(--text-main);
  font-weight:500;
}
.brand,
.sidebar-brand .brand,
.mobile-header .brand,
.hero h1,
.story-hero h1,
.login-card h1,
.year,
.side-nav span,
.side-footer span,
.view-switch a,
.quick-main-button,
.primary,
.grid-meta strong,
.story-card h2,
.look-card h2,
.mobile-bottom-nav span,
.bear-copy strong,
.bear-copy span{
  font-family:var(--font-en) !important;
}
.brand,
.sidebar-brand .brand,
.mobile-header .brand,
.hero h1,
.story-hero h1,
.login-card h1,
.year{
  font-weight:800 !important;
  letter-spacing:.01em;
}
.side-nav span,
.side-footer span,
.view-switch a,
.quick-main-button,
.primary,
.mobile-bottom-nav span{
  font-weight:700 !important;
}
.side-nav small,
.side-footer small,
.mobile-bottom-nav small,
.hero h1 small,
.story-hero h1 small,
.hero p small,
.story-hero p small,
.grid-meta time,
.grid-meta span{
  font-family:var(--font-ja) !important;
  color:var(--text-sub) !important;
  font-weight:500 !important;
}
.sidebar-brand .brand{
  font-size:25px;
}
.side-nav span,
.side-footer span{
  font-size:16px;
}
.side-nav small,
.side-footer small{
  font-size:11px;
}
.hero h1{
  font-size:46px;
}
.grid-meta strong{
  font-size:13px;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.grid-meta time,
.grid-meta span{
  color:#fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.post,
.story-card,
.look-card,
.album-card{
  color:var(--text-main);
}
@media(max-width:760px){
  .mobile-header .brand{
    font-size:21px;
    font-weight:800 !important;
  }
  .mobile-bottom-nav span{
    font-size:10px;
    font-weight:700 !important;
  }
  .mobile-bottom-nav small{
    font-size:7px;
    font-weight:500 !important;
  }
  .hero h1{
    font-size:34px;
  }
}

/* Grouped sidebar menu */
.grouped-nav{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:18px;
}
.nav-group{
  display:grid;
  gap:7px;
}
.nav-separator{
  height:1px;
  margin:13px 12px;
  background:linear-gradient(90deg,transparent,#dfcfd6 15%,#dfcfd6 85%,transparent);
}
.grouped-nav .nav-group:first-child a{
  background:linear-gradient(135deg,#ffdbe5,#f7dbe5);
}
.grouped-nav .nav-group:not(:first-child) a{
  background:transparent;
}
.grouped-nav .nav-group:not(:first-child) a:hover{
  background:linear-gradient(135deg,#ffeef3,#f7f1fb);
}
.composer h1 small{
  display:block;
  margin-top:4px;
  color:#77666d;
  font-family:var(--font-ja) !important;
  font-size:13px;
  font-weight:500;
}

/* Fixed Story/Outfit form and cumulative multi-photo picker */
.fixed-post-type{
  display:flex;
  align-items:baseline;
  gap:9px;
  padding:13px 15px;
  border:1px solid #eadde3;
  border-radius:15px;
  background:linear-gradient(135deg,#fff4f7,#f8f2fb);
}
.fixed-post-type strong{
  font-family:var(--font-en) !important;
  font-size:18px;
  font-weight:800;
}
.fixed-post-type small{
  color:#77666d;
  font-family:var(--font-ja) !important;
  font-size:12px;
  font-weight:500;
}
.fixed-post-type.is-outfit{
  background:linear-gradient(135deg,#f5f0fb,#fff5f8);
}
.multi-photo-field{
  display:grid;
  gap:8px;
}
.field-label{
  font-weight:700;
}
.photo-picker-button{
  display:inline-flex !important;
  width:max-content;
  align-items:center;
  justify-content:center;
  padding:10px 15px;
  border:1px dashed #d79bad;
  border-radius:999px;
  color:#a65370;
  background:#fff4f7;
  font-weight:700 !important;
  cursor:pointer;
}
.multi-photo-field>small{
  color:#77666d;
  font-size:11px;
}
.selected-photo-preview{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:5px;
}
.selected-photo-item{
  position:relative;
  overflow:hidden;
  aspect-ratio:1/1;
  border:1px solid #eadde3;
  border-radius:13px;
  background:#f5eef1;
}
.selected-photo-item img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.selected-photo-remove{
  position:absolute;
  top:5px;
  right:5px;
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  padding:0;
  border:0;
  border-radius:50%;
  color:#fff;
  background:rgba(51,38,44,.78);
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.selected-photo-number{
  position:absolute;
  left:5px;
  bottom:5px;
  display:grid;
  place-items:center;
  min-width:22px;
  height:22px;
  padding:0 5px;
  border-radius:999px;
  color:#fff;
  background:rgba(194,99,130,.88);
  font-size:10px;
  font-weight:800;
}
@media(max-width:700px){
  .selected-photo-preview{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .photo-picker-button{
    width:100%;
  }
}