:root{
  --main-bg:#f6f8fc;
  --main-bg-accent:#eef4ff;
  --main-text:#1f2937;
  --main-sub:#5f6f83;
  --main-card:#ffffff;
  --main-card-grad-start:#ffffff;
  --main-card-grad-end:#fcfdff;
  --main-border:#dce4ef;
  --main-primary:#3f6fff;
  --main-accent:#ff5ca8;
  --main-icon-accent:#ff5ca8;
  --main-icon-muted:#55657a;
  --main-ok:#0f9f6e;
  --main-ng:#d23c45;
  --main-header-height:58px;
  --main-bg-gradient:radial-gradient(1200px 700px at 10% -5%,var(--main-bg-accent) 0%,var(--main-bg) 55%,#f7f8fb 100%);
  --main-card-gradient:linear-gradient(180deg,var(--main-card-grad-start) 0%,var(--main-card-grad-end) 100%);
  --main-glass-bg:rgba(255,255,255,.78);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html,body{overflow-x:hidden}
body{
  font-family:"M PLUS 1p","M PLUS Rounded 1c",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  background:var(--main-bg-gradient);
  color:var(--main-text);
}
body,body button,body input,body select,body textarea,body a,body h1,body h2,body h3,body p,body span,body div,body th,body td{
  font-family:"M PLUS 1p","M PLUS Rounded 1c",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
.report-app{
  padding-top:calc(var(--main-header-height) + env(safe-area-inset-top));
  padding-bottom:calc(88px + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
.report-header{
  position:fixed;
  left:0;right:0;top:0;
  height:calc(var(--main-header-height) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:var(--main-glass-bg);
  border-bottom:1px solid var(--main-border);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:60;
}
.report-header--border{
  border-top:5px solid var(--main-primary);
}
.report-header-inner{
  max-width:1120px;
  height:var(--main-header-height);
  margin:0 auto;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.report-header-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--main-text);
  font-size:16px;
  font-weight:800;
  letter-spacing:.03em;
  text-decoration:none;
}
.report-header-logo i{
  color:var(--main-icon-accent);
  font-size:20px;
  line-height:1;
}
.report-header-logo img{
  display:block;
  width:auto;
  max-width:min(220px, 68vw);
  height:32px;
  object-fit:contain;
}
.wrap{max-width:1120px;margin:24px auto;padding:0 14px 92px}
.card{
  background:var(--main-card-gradient);
  border:1px solid var(--main-border);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(29,44,66,0.06);
  padding:16px;
  margin-bottom:12px;
}
h1,h2{margin:0 0 10px;letter-spacing:.01em}
.page-title{display:flex;align-items:center;gap:8px;font-weight:900}
.page-title{font-weight:800}
.page-title i{color:var(--main-icon-accent);font-size:26px;line-height:1}
.section-title{display:flex;align-items:center;gap:8px;font-weight:700;margin-top:10px;margin-bottom:20px}
.section-title-center{justify-content:center}
.section-title-user{margin-bottom:30px}
.section-title i{color:var(--main-icon-accent);font-size:20px;line-height:1}
a,
a:hover,
a:focus,
a:active{
  color:var(--main-primary);
  text-decoration:none;
}
.meta{font-size:12px;color:var(--main-sub);line-height:1.6}
.ok{color:var(--main-ok);font-weight:800}
.ng{color:var(--main-ng);font-weight:800}
.mt12{margin-top:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
button{
  min-height:40px;
  padding:0 18px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#ff8a00,#ff4fa0);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(255,79,160,.26);
}
button:hover{filter:brightness(1.03)}
.report-footer{
  position:fixed;
  left:0;right:0;bottom:0;
  background:var(--main-glass-bg);
  border-top:1px solid var(--main-border);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:50;
}
.report-footer-nav{display:grid;grid-template-columns:repeat(5,1fr);max-width:1120px;margin:0 auto}
.report-footer-link{
  min-height:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:#55657a;
  font-size:10px;
  font-weight:700;
}
.report-footer-link i{font-size:18px;line-height:1;color:inherit}
.report-footer-link:hover{color:var(--main-primary);text-decoration:none}
.report-footer-link.is-active{color:#f45ca8;background:#fff2f9}

.report-admin-header{
  position:fixed;
  left:0;right:0;top:0;
  height:calc(var(--main-header-height) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:linear-gradient(135deg,rgba(255,92,168,.24),rgba(63,111,255,.16));
  border-bottom:1px solid var(--main-border);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:60;
}
.report-admin-header-inner{
  max-width:1120px;
  height:var(--main-header-height);
  margin:0 auto;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.report-admin-header-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--main-text);
  font-size:16px;
  font-weight:800;
  letter-spacing:.03em;
  text-decoration:none;
}
.report-admin-header-logo i{
  color:var(--main-icon-accent);
  font-size:20px;
  line-height:1;
}
.report-admin-footer{
  position:fixed;
  left:0;right:0;bottom:0;
  background:linear-gradient(135deg,rgba(255,92,168,.20),rgba(63,111,255,.14));
  border-top:1px solid var(--main-border);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:50;
}
.report-admin-footer-nav{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:1120px;
  margin:0 auto;
}
.report-admin-footer-link{
  min-height:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:#55657a;
  font-size:10px;
  font-weight:700;
}
.report-admin-footer-link i{font-size:18px;line-height:1;color:inherit}
.report-admin-footer-link:hover{color:var(--main-primary);text-decoration:none}
.report-admin-footer-link.is-active{color:#f45ca8;background:#fff2f9}

/* Theme variants: body に class を付けて切替
   例: <body class="report-app theme-pink"> */
body.theme-normal{
  --main-bg:#f6f8fc;
  --main-bg-accent:#eef4ff;
  --main-card-grad-start:#ffffff;
  --main-card-grad-end:#fcfdff;
  --main-text:#1f2937;
  --main-sub:#5f6f83;
  --main-border:#dce4ef;
  --main-primary:#3f6fff;
  --main-accent:#ff5ca8;
  --main-icon-accent:#ff5ca8;
  --main-icon-muted:#55657a;
  --main-bg-gradient:radial-gradient(1200px 700px at 10% -5%,#eef4ff 0%,#f6f8fc 55%,#f7f8fb 100%);
  --main-card-gradient:linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);
  --main-glass-bg:rgba(255,255,255,.78);
}
body.theme-pink{
  --main-text:#ffffff;
  --main-sub:rgba(255,255,255,.86);
  --main-border:rgba(255,255,255,.32);
  --main-primary:#ffffff;
  --main-accent:#ffffff;
  --main-icon-accent:#ffffff;
  --main-icon-muted:#ffffff;
  --main-bg-gradient:linear-gradient(145deg,#ff4fa0 0%,#ff7ec2 35%,#ff8fae 100%);
  --main-card-gradient:linear-gradient(145deg,#ff6aae 0%,#ff83c0 55%,#ff9fd1 100%);
  --main-glass-bg:rgba(255,125,183,.34);
}
body.theme-yellow{
  --main-text:#ffffff;
  --main-sub:rgba(255,255,255,.9);
  --main-border:rgba(255,255,255,.36);
  --main-primary:#ffffff;
  --main-accent:#ffffff;
  --main-icon-accent:#ffffff;
  --main-icon-muted:#ffffff;
  --main-bg-gradient:linear-gradient(145deg,#ffb300 0%,#ffc84d 40%,#ffd968 100%);
  --main-card-gradient:linear-gradient(145deg,#ffbf1f 0%,#ffd35d 55%,#ffe18a 100%);
  --main-glass-bg:rgba(255,190,44,.36);
}
body.theme-blue{
  --main-text:#ffffff;
  --main-sub:rgba(255,255,255,.86);
  --main-border:rgba(255,255,255,.28);
  --main-primary:#ffffff;
  --main-accent:#ffffff;
  --main-icon-accent:#ffffff;
  --main-icon-muted:#ffffff;
  --main-bg-gradient:linear-gradient(145deg,#2a5cff 0%,#3f7eff 40%,#65a0ff 100%);
  --main-card-gradient:linear-gradient(145deg,#3a6dff 0%,#4a89ff 55%,#73adff 100%);
  --main-glass-bg:rgba(74,133,255,.34);
}
body.theme-green{
  --main-text:#ffffff;
  --main-sub:rgba(255,255,255,.86);
  --main-border:rgba(255,255,255,.28);
  --main-primary:#ffffff;
  --main-accent:#ffffff;
  --main-icon-accent:#ffffff;
  --main-icon-muted:#ffffff;
  --main-bg-gradient:linear-gradient(145deg,#11a676 0%,#2fbe8f 45%,#53d6a8 100%);
  --main-card-gradient:linear-gradient(145deg,#26b885 0%,#3ac99a 55%,#63dfb3 100%);
  --main-glass-bg:rgba(49,189,143,.34);
}
body.theme-black{
  --main-text:#ffffff;
  --main-sub:rgba(255,255,255,.78);
  --main-border:rgba(255,255,255,.22);
  --main-primary:#ffffff;
  --main-accent:#ffffff;
  --main-icon-accent:#ffffff;
  --main-icon-muted:#ffffff;
  --main-bg-gradient:linear-gradient(145deg,#0d1117 0%,#1b2430 45%,#2a3442 100%);
  --main-card-gradient:linear-gradient(145deg,#1a2230 0%,#232f42 55%,#31415a 100%);
  --main-glass-bg:rgba(25,35,52,.38);
}