:root{
  --bg1:#eaf6ff; --bg2:#d6ecfd;
  --ink:#23405e; --ink-soft:#5b7a99;
  --card:#ffffff; --line:#bcd9f2;
  --accent:#7db9e8; --accent-deep:#4a90c4;
  --radius:26px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle, rgba(255,255,255,.65) 1.6px, transparent 1.7px) 0 0/22px 22px,
    linear-gradient(180deg, var(--bg1), var(--bg2));
  min-height:100dvh;
  padding-bottom:calc(16px + var(--safe-bottom));
}
.app-header{padding:calc(14px + env(safe-area-inset-top,0px)) 16px 4px; text-align:center;}
.app-header h1{margin:0; font-size:26px;}
.subtitle{margin:4px 0 0; color:var(--ink-soft); font-size:13px;}

.tabbar{
  display:flex; gap:8px; padding:12px 16px 4px; position:sticky; top:0; z-index:5;
}
.tab{
  flex:1; border:2px solid var(--line); background:rgba(255,255,255,.75);
  color:var(--ink); border-radius:999px; padding:10px 4px; font-size:15px; font-weight:600;
}
.tab.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.tab-badge{
  background:#fff; color:var(--accent-deep); border-radius:999px;
  font-size:12px; padding:1px 7px; margin-left:2px;
}
.tab.active .tab-badge{background:#fff;}

main{padding:8px 16px 0; max-width:640px; margin:0 auto;}
.view{display:none;}
.view.active{display:block;}

.import-box, .empty, .add-album{
  background:var(--card); border:2px solid var(--line); border-radius:var(--radius);
  padding:16px; margin:10px 0;
}
.import-btn{
  display:block; text-align:center; background:var(--accent-deep); color:#fff;
  font-size:17px; font-weight:700; border-radius:999px; padding:14px 10px; cursor:pointer;
}
.hint{color:var(--ink-soft); font-size:12.5px; line-height:1.6; margin:10px 2px 0;}
.status{font-size:13px; color:var(--accent-deep); min-height:1.2em; margin:8px 2px 0;}
.empty{text-align:center; color:var(--ink-soft);}
.empty-big{font-size:17px; color:var(--ink); font-weight:700;}

.progress-row{display:flex; justify-content:space-between; font-size:13.5px; margin:12px 2px 6px; font-weight:600;}
.skipped{color:var(--ink-soft); font-weight:400;}
.progress-bar{height:10px; background:#fff; border:2px solid var(--line); border-radius:999px; overflow:hidden;}
#progressFill{height:100%; width:0%; background:var(--accent); transition:width .25s;}

.stage{
  margin:12px 0 6px; background:#fff; border:2px solid var(--line); border-radius:var(--radius);
  padding:8px; display:flex; align-items:center; justify-content:center; min-height:280px;
}
.stage img{max-width:100%; max-height:52dvh; border-radius:18px; object-fit:contain;}
.photo-meta{text-align:center; color:var(--ink-soft); font-size:12.5px; margin:4px 0; word-break:break-all;}

.assign-label{text-align:center; font-weight:700; margin:12px 0 8px;}
.album-buttons{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.album-btn{
  border:none; border-radius:20px; padding:16px 8px; font-size:16px; font-weight:700;
  color:#23405e; cursor:pointer; box-shadow:0 2px 6px rgba(74,144,196,.18);
}
.album-btn:active{transform:scale(.97);}
.album-btn .count{display:block; font-size:12px; font-weight:400; opacity:.75; margin-top:2px;}

.sort-actions{display:flex; gap:10px; margin-top:14px;}
.ghost-btn{
  flex:1; background:#fff; border:2px solid var(--line); color:var(--ink);
  border-radius:999px; padding:12px 8px; font-size:15px; font-weight:600; cursor:pointer;
}
.ghost-btn:disabled{opacity:.4;}
.primary-btn{
  background:var(--accent-deep); color:#fff; border:none; border-radius:999px;
  padding:12px 16px; font-size:15px; font-weight:700; cursor:pointer;
}
.primary-btn.alt{background:var(--accent);}
.danger-btn{
  background:#fff; border:2px solid #f0b6b6; color:#b03a3a; border-radius:999px;
  padding:12px 16px; font-size:15px; font-weight:600; cursor:pointer; width:100%;
}
.danger-btn.small{width:auto; flex:1; padding:10px 6px; font-size:13.5px;}

.album-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px;}
.album-card{
  background:#fff; border:2px solid var(--line); border-radius:var(--radius); overflow:hidden;
  text-align:left; padding:0; cursor:pointer; color:var(--ink);
}
.album-card .cover{height:110px; background:var(--bg1); display:flex; align-items:center; justify-content:center; font-size:34px; overflow:hidden;}
.album-card .cover img{width:100%; height:100%; object-fit:cover;}
.album-card .card-body{padding:10px 12px 12px;}
.album-card .card-name{font-weight:700; font-size:15.5px;}
.album-card .card-count{color:var(--ink-soft); font-size:12.5px; margin-top:2px;}
.dot{display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:6px; vertical-align:-1px;}

.detail-head{display:flex; align-items:center; gap:10px; margin-top:12px;}
.detail-head h2{font-size:19px; margin:0;}
.detail-head .ghost-btn{flex:0 0 auto; padding:8px 12px; font-size:13.5px;}
.detail-actions{display:flex; gap:10px; margin-top:10px;}
.detail-actions .primary-btn{flex:1;}
.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px;}
.photo-grid button{border:none; padding:0; border-radius:14px; overflow:hidden; background:#fff; aspect-ratio:1; cursor:pointer;}
.photo-grid img{width:100%; height:100%; object-fit:cover; display:block;}

.section-title{font-size:17px; margin:18px 2px 8px;}
.add-album{display:flex; flex-direction:column; gap:10px;}
.add-album input{
  border:2px solid var(--line); border-radius:14px; padding:12px; font-size:16px; width:100%;
}
.color-choices{display:flex; gap:8px; flex-wrap:wrap;}
.color-choice{width:34px; height:34px; border-radius:50%; border:3px solid transparent; cursor:pointer; padding:0;}
.color-choice.selected{border-color:var(--ink);}
.manage-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.manage-list li{
  background:#fff; border:2px solid var(--line); border-radius:18px; padding:10px 12px;
  display:flex; align-items:center; gap:8px;
}
.manage-list .grow{flex:1; font-weight:600;}
.manage-list .mini-btn{
  background:var(--bg1); border:1.5px solid var(--line); border-radius:999px;
  padding:6px 10px; font-size:13px; color:var(--ink); cursor:pointer;
}
.manage-list .mini-btn.del{color:#b03a3a; border-color:#f0b6b6;}

.modal{
  position:fixed; inset:0; background:rgba(35,64,94,.45); z-index:20;
  display:flex; align-items:flex-end; justify-content:center;
}
.modal[hidden]{display:none;}
.modal-card{
  background:#fff; width:100%; max-width:640px; max-height:92dvh; overflow:auto;
  border-radius:26px 26px 0 0; padding:16px 16px calc(16px + var(--safe-bottom));
}
.modal-card img{width:100%; max-height:50dvh; object-fit:contain; border-radius:14px; background:var(--bg1);}
.move-label{display:block; font-size:13px; font-weight:700; margin:12px 0 6px;}
.move-row{display:flex; gap:8px;}
.move-row select{flex:1; font-size:16px; padding:10px; border:2px solid var(--line); border-radius:14px; background:#fff; color:var(--ink);}
.modal-actions{display:flex; gap:8px; margin-top:12px;}
.modal-actions .ghost-btn{padding:10px 6px; font-size:13.5px;}

.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(22px + var(--safe-bottom)); z-index:30;
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px; font-size:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.25); max-width:88vw; text-align:center;
}