:root{
  --pink:#ff6fae;
  --pink-d:#e84d93;
  --blue:#5ac8ff;
  --blue-d:#3aa3db;
  --green:#7bdf8f;
  --yellow:#ffde59;
  --purple:#c58bff;
  --bg:#fff6fb;
  --ink:#3a2a40;
  --card:#ffffff;
  --shadow:0 10px 28px rgba(255,111,174,.22);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;font-family:"Hiragino Maru Gothic ProN","Rounded Mplus 1c","Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--bg);}
body{min-height:100vh;overflow-x:hidden;background:
  radial-gradient(circle at 10% 10%, #fff0f8 0%, transparent 40%),
  radial-gradient(circle at 90% 30%, #eaf6ff 0%, transparent 40%),
  radial-gradient(circle at 50% 90%, #fff7d6 0%, transparent 40%),
  #fff6fb;
}

/* ==== background deco ==== */
.bg-deco{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;}
.b1{width:380px;height:380px;background:#ffbde0;top:-80px;left:-80px;}
.b2{width:420px;height:420px;background:#bde4ff;top:30%;right:-120px;}
.b3{width:340px;height:340px;background:#fff1a8;bottom:-100px;left:25%;}
.b4{width:300px;height:300px;background:#e0c7ff;top:55%;left:-80px;}

.star{position:absolute;font-size:26px;color:#ffcf3c;opacity:.8;animation:twinkle 2.4s infinite ease-in-out;}
.s1{top:8%;left:15%;animation-delay:0s;}
.s2{top:20%;right:12%;font-size:20px;animation-delay:.4s;color:#ff8fc3;}
.s3{top:55%;left:8%;font-size:28px;animation-delay:.8s;color:#7bd0ff;}
.s4{bottom:12%;right:18%;font-size:22px;animation-delay:1.2s;color:#ffcf3c;}
.s5{top:40%;right:6%;font-size:18px;animation-delay:1.6s;color:#c58bff;}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:.4;}50%{transform:scale(1.3) rotate(20deg);opacity:1;}}

.float-img{position:absolute;width:120px;opacity:.55;filter:drop-shadow(0 6px 12px rgba(255,111,174,.3));animation:float 6s infinite ease-in-out;}
.fi1{top:12%;right:4%;width:110px;animation-delay:0s;}
.fi2{bottom:14%;left:5%;width:130px;animation-delay:1.2s;}
.fi3{top:48%;right:2%;width:100px;animation-delay:2.4s;}
.fi4{bottom:30%;right:8%;width:90px;animation-delay:3.6s;opacity:.45;}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-18px) rotate(4deg);}}

/* ==== header ==== */
header{text-align:center;padding:46px 20px 14px;position:relative;}
.title-wrap{display:inline-flex;align-items:center;gap:14px;justify-content:center;}
.title-icon{width:72px;height:auto;filter:drop-shadow(0 4px 10px rgba(255,111,174,.35));}
.title-icon.left{animation:bob 3s infinite ease-in-out;}
.title-icon.right{animation:bob 3s infinite ease-in-out .8s;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg);}50%{transform:translateY(-8px) rotate(6deg);}}

header h1{margin:0;font-size:40px;letter-spacing:.02em;line-height:1.15;}
header h1 .rs{background:linear-gradient(135deg,#ff6fae,#ff3d8b);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;transform:rotate(-2deg);}
header h1 .arrow{color:var(--purple);display:inline-block;margin:0 6px;animation:wiggle 1.6s infinite;}
@keyframes wiggle{0%,100%{transform:translateX(0);}50%{transform:translateX(6px);}}
header h1 .jpg{background:linear-gradient(135deg,#5ac8ff,#3aa3db);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;transform:rotate(2deg);}
.pop{display:inline-block;background:linear-gradient(135deg,var(--pink),var(--purple),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;transform:rotate(-2deg);font-size:46px;}
.sparkle{display:inline-block;animation:spin 3s infinite linear;}
@keyframes spin{to{transform:rotate(360deg);}}
.sub{color:#8a6c80;margin:14px 0 12px;font-size:16px;}
.badges{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:6px;}
.badge{background:#fff;border:2px solid #ffd6e8;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;color:#c44a82;box-shadow:0 3px 8px rgba(255,111,174,.12);}

/* ==== layout ==== */
main{max-width:900px;margin:0 auto;padding:20px;display:flex;flex-direction:column;gap:20px;position:relative;z-index:1;}

.card{background:var(--card);border-radius:28px;padding:24px;box-shadow:var(--shadow);border:3px solid #ffe3ef;position:relative;}

/* ==== drop area ==== */
.drop-area{cursor:pointer;transition:transform .15s, border-color .15s, background .15s;overflow:hidden;}
.drop-area:hover{transform:translateY(-3px) rotate(-.3deg);border-color:var(--pink);}
.drop-area.drag{background:#fff0f7;border-color:var(--pink);transform:scale(1.01);}
.drop-deco{position:absolute;width:90px;opacity:.45;pointer-events:none;}
.dd1{top:-10px;right:-10px;transform:rotate(15deg);width:80px;}
.dd2{bottom:-10px;left:-10px;transform:rotate(-15deg);width:80px;}
.drop-inner{text-align:center;padding:22px 10px;position:relative;z-index:1;}
.icon-row{font-size:40px;display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:8px;}
.icon-row span:nth-child(even){font-size:26px;color:var(--pink);animation:wiggle 1.6s infinite;}
.drop-inner .big{font-size:22px;margin:10px 0 4px;font-weight:800;color:#c44a82;}
.drop-inner .small{color:#a08598;margin:4px 0 12px;}
.tip{margin-top:12px;color:#8a6c80;font-size:13px;}
.big-btn{padding:14px 28px;font-size:16px;}

/* ==== buttons ==== */
.btn{display:inline-block;border:none;border-radius:999px;padding:12px 22px;font-size:15px;font-weight:800;cursor:pointer;color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.1);transition:transform .1s,filter .15s;font-family:inherit;}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px);}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.1);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn.pink{background:linear-gradient(135deg,var(--pink),var(--pink-d));}
.btn.blue{background:linear-gradient(135deg,var(--blue),var(--blue-d));}
.btn.green{background:linear-gradient(135deg,#8cecA0,#4fc96a);}
.btn.gray{background:linear-gradient(135deg,#c6b8c2,#9a8894);}

/* ==== settings ==== */
.settings h2{margin:0 0 16px;font-size:20px;}
.h2-pop{background:linear-gradient(135deg,var(--pink),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;}
.row{display:flex;align-items:center;gap:12px;margin:12px 0;flex-wrap:wrap;}
.lbl{width:120px;font-weight:800;color:#6e4f63;}
.row input[type=number]{border:2px solid #ffd6e8;border-radius:12px;padding:8px 12px;font-size:15px;width:110px;font-family:inherit;}
.row input[type=number]:focus{outline:none;border-color:var(--pink);}
.row input[type=range]{flex:1;accent-color:var(--pink);}
.val{font-weight:800;width:36px;text-align:right;color:var(--pink-d);}

.seg{display:flex;gap:6px;background:#ffeef6;padding:5px;border-radius:999px;}
.seg-btn{border:none;background:transparent;padding:9px 18px;border-radius:999px;cursor:pointer;font-weight:800;color:#9a708a;font-family:inherit;font-size:13px;}
.seg-btn.active{background:#fff;color:var(--pink-d);box-shadow:0 2px 8px rgba(0,0,0,.1);}

.presets{display:flex;gap:6px;flex-wrap:wrap;}
.presets button{border:2px solid #ffd6e8;background:#fff;border-radius:999px;padding:6px 13px;cursor:pointer;font-weight:800;color:#c44a82;font-family:inherit;transition:all .15s;}
.presets button:hover{background:#fff0f7;transform:translateY(-1px);}

/* ==== actions ==== */
.actions .act-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.actions .btns{display:flex;gap:8px;flex-wrap:wrap;}
#countLabel{font-weight:800;color:#6e4f63;font-size:15px;}

.progress-wrap{margin-top:14px;height:16px;background:#ffe3ef;border-radius:999px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.08);}
.progress{height:100%;width:0%;background:linear-gradient(90deg,var(--pink),var(--purple),var(--blue));transition:width .25s;background-size:200% 100%;animation:slide 2s linear infinite;}
@keyframes slide{to{background-position:-200% 0;}}

/* ==== list ==== */
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;}
.item{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:3px solid #ffe3ef;display:flex;flex-direction:column;transition:transform .15s;}
.item:hover{transform:translateY(-3px);}
.item .thumb{aspect-ratio:4/3;background:linear-gradient(135deg,#fff0f7,#eaf6ff);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.item .thumb img{width:100%;height:100%;object-fit:cover;}
.item .thumb .ph{display:flex;flex-direction:column;align-items:center;gap:4px;color:#b87fa5;padding:10px;text-align:center;}
.item .thumb .ph .ph-icon{font-size:32px;}
.item .thumb .ph .ph-text{font-size:10px;font-weight:700;line-height:1.3;color:#a890a0;}
.item .meta{padding:10px 12px;font-size:12px;}
.item .name{font-weight:800;color:#6e4f63;word-break:break-all;line-height:1.3;}
.item .sz{color:#a08598;margin-top:4px;}
.item .st{margin-top:6px;font-weight:800;}
.item .st.ok{color:#3ca258;}
.item .st.err{color:#e25858;}
.item .st.wait{color:#c48bd3;}
.item .st.run{color:#3aa3db;}
.item .dl{display:block;text-align:center;margin:0 10px 10px;padding:9px;background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;text-decoration:none;border-radius:999px;font-weight:800;font-size:12px;box-shadow:0 3px 0 rgba(0,0,0,.1);}
.item .dl:hover{filter:brightness(1.07);}
.item .dl.hide{display:none;}

footer{text-align:center;padding:36px 20px;color:#a08598;font-size:12px;}

/* ==== manual floating button ==== */
.manual-fab{
  position:fixed;bottom:28px;right:28px;z-index:50;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#ffde59,#ffb347);
  color:#6a3e00;text-decoration:none;font-weight:800;
  padding:14px 22px 14px 18px;border-radius:999px;
  border:3px solid #fff;
  box-shadow:0 8px 22px rgba(255,140,40,.45), 0 3px 0 rgba(0,0,0,.1);
  animation:fabBob 2.4s infinite ease-in-out;
  transition:transform .15s, filter .15s;
}
.manual-fab:hover{transform:translateY(-4px) rotate(-2deg) scale(1.04);filter:brightness(1.08);}
.manual-fab:active{transform:translateY(1px);}
.manual-fab .mf-icon{font-size:30px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15));}
.manual-fab .mf-text{font-size:13px;line-height:1.2;letter-spacing:.02em;}
.manual-fab .mf-spark{position:absolute;top:-10px;left:-8px;font-size:22px;color:#fff;animation:spin 3s infinite linear;text-shadow:0 0 8px #ffcf3c,0 0 12px #ff9ccb;}
.manual-fab::after{content:"";position:absolute;inset:-6px;border-radius:999px;background:linear-gradient(135deg,#ff9ccb,#ffde59,#7bd0ff);z-index:-1;filter:blur(10px);opacity:.55;animation:glow 3s infinite ease-in-out;}
@keyframes fabBob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-6px) rotate(2deg);}}
@keyframes glow{0%,100%{opacity:.4;}50%{opacity:.75;}}

@media (max-width:600px){
  header h1{font-size:30px;}
  .pop{font-size:34px;}
  .title-icon{width:52px;}
  .float-img{display:none;}
  .manual-fab{bottom:16px;right:16px;padding:12px 18px 12px 14px;}
  .manual-fab .mf-icon{font-size:24px;}
  .manual-fab .mf-text{font-size:11px;}
}