:root{
  --blue:#0c5abf;--blue-weak:#eaf2ff;
  --green:#15996b;--green-weak:#e9f7f1;
  --orange:#ffcc99;--orange-weak:#fff7ec;
  --bg:#f4f8fc;--text:#1f2937;--muted:#6b7280;
  --radius:16px;--shadow:0 3px 8px rgba(12,90,191,.2),0 -1px 4px rgba(12,90,191,.1);
  --bottom-nav-h:64px;--inner-inset:clamp(2px,1vw,8px);--card-gutter:16px;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--text);background:var(--bg);
  -webkit-tap-highlight-color:transparent;
}
.wrap{ max-width:1100px; margin:0 auto; padding:24px 24px 84px; }

/* header */
header.site{padding-top:10px; margin-bottom: 20px; text-align:left}
header.site h1{margin:0;font-size:1.6em;font-weight:600;color:#ff6600;line-height:1.1}
#last-update{margin-top:4px;font-size:.9em;color:var(--muted);line-height:1.2}

/* card 共通 */
.card-group{
  background:#fff;border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow);margin-top:10px;
  width:calc(100% - var(--card-gutter)*2);margin-left:auto;margin-right:auto;
}
.card-group.pink{background:#ffe9ef;border-top:4px solid #d63b75;box-shadow:0 3px 8px rgba(214,59,117,.25)}
.card-group.pink h2{margin:0 0 8px;font-size:1.2rem;font-weight:600;color:#d63b75}
.card-group.blue{border-top:4px solid var(--blue)}
.card-group.blue h2{margin:0 0 10px;font-size:1.2rem;color:var(--blue)}
.card-group.green.inner{
  background:var(--green-weak);border:2px solid var(--green);border-radius:12px;padding:16px;margin-top:18px;
  width:calc(100% - var(--inner-inset)*2);margin-inline:auto;box-shadow:none;
}
.card-group.green.inner h3{
  margin:0 0 10px;font-size:1rem;font-weight:600;color:var(--green);
  border-left:4px solid var(--green);padding-left:8px;
}

/* sub-links 共通 */
.sub-links{display:grid;gap:8px 10px;margin-top:4px}
.sub-links a{
  display:inline-block;text-align:center;text-decoration:none;
  padding:12px 10px;border-radius:12px;font-size:.95rem;font-weight:500;
  transition:background .15s,color .15s,transform .15s,box-shadow .15s;
  word-break:keep-all;overflow-wrap:break-word;
}
.sub-links a:hover{transform:translateY(-2px)}

/* 青リンク（常に2列） */
.card-group.blue .sub-links{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-group.blue .sub-links a{background:var(--blue-weak);color:var(--text)}
.card-group.blue .sub-links a:hover{background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(12,90,191,.15);}

/* 緑リンク（内枠・常に2列） */
.card-group.green.inner .sub-links{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-group.green.inner .sub-links a{background:#fff;border:1px solid var(--green);color:var(--green)}
.card-group.green.inner .sub-links a:hover{background:var(--green);color:#fff;}

/* オレンジ（循環表・1列） */
.card-group.orange{background:var(--orange-weak);border-top:4px solid var(--orange);box-shadow:0 3px 8px rgba(255,156,66,.2);margin-top:12px}
.card-group.orange .sub-links{grid-template-columns:1fr;justify-items:center}
.card-group.orange .sub-links a{
  background:#fff;border:1px solid var(--orange);color:#9a5a00;
  width:calc(100% - var(--card-gutter)*2);max-width:520px;margin-inline:auto;
}
.card-group.orange .sub-links a:hover{background:var(--orange);color:#fff;box-shadow:0 4px 12px rgba(255,156,66,.25);}

/* パープル（更新履歴・1列） */
.card-group.purple{
  background: #f3f0ff; border-top: 4px solid #7e5bef; box-shadow: 0 3px 8px rgba(126,91,239,.25);
  margin-top: 12px; margin-bottom: 24px;
}
.card-group.purple .sub-links{ grid-template-columns: 1fr; justify-items: center; }
.card-group.purple .sub-links a{
  background: #fff; border: 1px solid #7e5bef; color: #4b2bbf;
  width: calc(100% - var(--card-gutter)*2); max-width: 520px; margin-inline: auto;
}
.card-group.purple .sub-links a:hover{ background: #7e5bef; color: #fff; box-shadow: 0 4px 12px rgba(126,91,239,.28); }

/* 白地の緑枠（時刻表・1列） */
.card-group.green-outline{
  background:#fff; border:2px solid var(--green); border-radius:var(--radius); box-shadow:var(--shadow); margin-top:12px; padding:16px 20px;
}
.card-group.green-outline .sub-links{ display:grid; grid-template-columns:1fr; justify-items:center; gap:10px; }
.card-group.green-outline .sub-links a{
  background:#fff; border:1px solid var(--green); color:var(--green);
  width:calc(100% - var(--card-gutter)*2); max-width:520px; margin-inline:auto;
}
.card-group.green-outline .sub-links a:hover{ background:var(--green); color:#fff; box-shadow:0 4px 12px rgba(21,153,107,.15); }

/* ======= 最新バージョンに更新（CTA） ======= */
.upgrade-wrap{ display:flex; justify-content:center; margin:16px 0 8px; }
.upgrade-cta{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:calc(100% - var(--card-gutter)*2); max-width:440px; padding:12px 16px;
  border:0; border-radius:999px; cursor:pointer; color:#fff; font-weight:800; font-size:16px;
  background:linear-gradient(135deg,#ff6b6b,#ff3b3b 55%,#ff8a6b);
  box-shadow: 0 10px 28px rgba(255,59,59,.28); transition:transform .12s ease;
}
.upgrade-cta:hover{ transform:translateY(-1px); box-shadow:0 14px 36px rgba(255,59,59,.32); }
.upgrade-cta:active{ transform:translateY(0); }
.upgrade-cta .glow{
  position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 0 rgba(255,59,59,.35); animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,59,59,.35) } 50%{ box-shadow:0 0 0 12px rgba(255,59,59,0) } }

/* --- プロフェッショナル・ブルー・デザイン --- */
.cache-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(15, 23, 42, 0.7); /* 深い紺色の半透明 */
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; z-index: 10000;
  opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.cache-progress.show { opacity: 1; pointer-events: auto; }
.cache-progress .inner {
  width: 85%; max-width: 360px; background: #ffffff; 
  padding: 30px 24px; border-radius: 24px; text-align: center; 
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.cache-progress .label { 
  font-size: 15px; font-weight: 700; margin-bottom: 20px; 
  color: #1e293b; line-height: 1.4; 
}
.progress-row { 
  position: relative; height: 14px; background: #e2e8f0; 
  border-radius: 99px; overflow: hidden; margin-bottom: 12px; 
}
.cache-progress .bar { 
  height: 100%; width: 0%; background: linear-gradient(90deg, #3b82f6, #60a5fa);
  transition: width 0.3s ease-out;
}
.cache-progress .pct { 
  font-size: 26px; font-weight: 900; color: #3b82f6; margin-bottom: 6px; 
}
.cache-progress .file-count { 
  font-size: 12px; color: #64748b; font-weight: 500;
}

/* その他調整 */
.bottom-nav a { padding-top: 8px; padding-bottom: 8px; }
#push-perm-btn{
  position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 80px);
  z-index: 9999; padding: 10px 14px; border: none; border-radius: 9999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.15); background: #2563eb; color: #fff; font-size: 14px;
}
@media (max-width:480px){ .wrap{ padding:20px } }