/* HRMS ORACLE — 深宇宙・銀河・星・金 */
:root{
  --void:#05060d;         /* 宇宙の闇 */
  --deep:#0a0c18;         /* カード地 */
  --deep2:#0f1224;
  --ink:#eef1ff;
  --dim:#9aa3c7;
  --dim2:#6f78a0;
  --gold:#e8c877;         /* 主役：金 */
  --gold-2:#c9a24a;
  --star:#dfe7ff;         /* 星の白 */
  --nebula-blue:#5c86d6;  /* 星雲の青（脇役） */
  --nebula-violet:#7d6bb0;/* 紫は控えめに */
  --line:rgba(232,200,119,.20);
  --line-soft:rgba(150,160,210,.14);
  --err:#ff9d9d;
  --good:#8fe0b0;
  --warn:#f0c26b;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  line-height:1.8; font-size:15px;
  background:var(--void);
  position:relative;
  min-height:100vh;
}
/* 銀河の帯（斜めに走る淡い光）＋ 中心の輝き */
body::before{
  content:""; position:fixed; inset:-20% -10%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% -8%, rgba(232,200,119,.10), transparent 60%),
    radial-gradient(90% 55% at 80% 15%, rgba(92,134,214,.12), transparent 55%),
    radial-gradient(80% 60% at 12% 85%, rgba(125,107,176,.10), transparent 55%),
    linear-gradient(115deg, transparent 40%, rgba(120,150,220,.06) 50%, transparent 60%);
}
/* 星（点描）*/
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, var(--star) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 70% 22%, var(--star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 40% 70%, var(--gold) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 62%, var(--star) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 12% 82%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 48%, var(--star) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 33% 12%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 88%, var(--gold) 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 55%, var(--star) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 95% 40%, var(--star) 50%, transparent 51%);
  background-repeat:repeat; background-size:520px 520px;
}

.wrap{max-width:800px; margin:0 auto; padding:0 18px 72px}
header.site{max-width:800px; margin:0 auto; padding:34px 18px 6px; text-align:center}
.brand{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:29px; letter-spacing:.18em; display:flex; gap:12px; justify-content:center; align-items:baseline;
}
.brand .mark{color:var(--gold); text-shadow:0 0 14px rgba(232,200,119,.55)}
.brand .name{font-weight:600}
.brand .beta{font-size:12px; color:var(--gold-2); letter-spacing:.14em}
.tag{color:var(--dim); font-size:13px; margin:8px 0 0}
.nav{display:flex; gap:10px; justify-content:center; margin-top:14px}
.nav a{
  color:var(--dim); text-decoration:none; font-size:13px;
  border:1px solid var(--line-soft); border-radius:999px; padding:6px 16px;
}
.nav a.on{color:var(--gold); border-color:var(--line); background:rgba(232,200,119,.06)}

footer.site{text-align:center; color:var(--dim2); font-size:11.5px; padding:22px 18px 44px; max-width:800px; margin:0 auto}

.card{
  background:linear-gradient(180deg, var(--deep2), var(--deep));
  border:1px solid var(--line); border-radius:18px;
  padding:24px; margin-top:20px;
  box-shadow:0 18px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(232,200,119,.06);
}
h1{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:19px; margin:0 0 16px; letter-spacing:.06em; font-weight:600;
}
h1::before{content:"✦ "; color:var(--gold)}

/* フォーム */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.person{border:1px solid var(--line-soft); border-radius:14px; padding:14px}
.person h2{font-size:14px; color:var(--gold); margin:0 0 8px; letter-spacing:.06em}
form label{display:block; margin:13px 0; font-size:12.5px; color:var(--dim)}
form label.inline{display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap; color:var(--dim)}
form label.inline small{color:var(--dim2); font-size:11px; flex-basis:100%; margin-left:26px}
input[type=text],input[type=date],input[type=time],textarea,select{
  width:100%; margin-top:6px; padding:10px 12px;
  background:#080a14; border:1px solid var(--line-soft); border-radius:10px;
  color:var(--ink); font:inherit;
}
input:focus,textarea:focus,select:focus{outline:1px solid var(--gold-2); border-color:var(--gold-2)}
textarea{resize:vertical}
.req{color:var(--gold-2); font-size:10.5px; margin-left:6px; border:1px solid var(--gold-2); border-radius:4px; padding:0 4px}
.opt{color:var(--dim2); font-size:10.5px; margin-left:6px}
small.hint{display:block; color:var(--dim2); font-size:11px; margin-top:5px; line-height:1.6}

fieldset{border:1px solid var(--line-soft); border-radius:12px; margin:16px 0; padding:12px}
legend{color:var(--dim); font-size:12px; padding:0 6px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{position:relative; margin:0 !important}
.chip input{position:absolute; opacity:0; width:0}
.chip span{
  display:inline-block; padding:7px 16px; border-radius:999px;
  border:1px solid var(--line-soft); background:#080a14; color:var(--dim); cursor:pointer; font-size:13px;
}
.chip input:checked + span{
  background:linear-gradient(180deg, var(--gold), var(--gold-2)); color:#171200; border-color:var(--gold); font-weight:700;
}
.chip input:focus-visible + span{outline:2px solid var(--nebula-blue)}

.consent{border:1px solid var(--line-soft); border-radius:12px; padding:12px; margin:14px 0; background:rgba(92,134,214,.05)}
.consent label{margin:0}

button.primary{
  width:100%; margin-top:20px; padding:14px;
  background:linear-gradient(180deg, var(--gold), var(--gold-2)); color:#171200;
  border:0; border-radius:12px; font-weight:800; letter-spacing:.1em; font-size:15px; cursor:pointer;
  box-shadow:0 6px 24px rgba(232,200,119,.22);
}
button.primary:disabled{opacity:.5; cursor:progress}
button.ghost{background:transparent; border:1px solid var(--line-soft); color:var(--dim); border-radius:10px; padding:7px 14px; cursor:pointer; font:inherit}

.err{color:var(--err); font-size:13px; margin-top:12px; white-space:pre-line}
.loading{text-align:center; color:var(--gold); letter-spacing:.28em; margin-top:26px; animation:tw 1.6s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.35}50%{opacity:1}}

/* 結果 */
.result-head{display:flex; justify-content:space-between; align-items:center; gap:12px}
.meta{color:var(--dim); font-size:12px; border-bottom:1px solid var(--line-soft); padding-bottom:12px; margin-bottom:16px}
.meta b{color:var(--gold)}
.sec{margin:20px 0}
.sec h2{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:15.5px; color:var(--gold); margin:0 0 7px; letter-spacing:.05em; font-weight:600;
}
.sec .body{white-space:pre-wrap; font-size:14px}

.score-hero{
  text-align:center; padding:20px 12px; border:1px solid var(--line); border-radius:16px;
  background:radial-gradient(120% 100% at 50% 0%, rgba(232,200,119,.10), transparent 70%);
  margin:6px 0 4px;
}
.score-hero .num{font-family:"Hiragino Mincho ProN",serif; font-size:46px; color:var(--gold); text-shadow:0 0 22px rgba(232,200,119,.5); line-height:1}
.score-hero .num small{font-size:16px; color:var(--dim)}
.score-hero .note{font-size:11px; color:var(--dim2); margin-top:8px; line-height:1.6}

.sysrow{display:flex; align-items:center; gap:10px; margin:9px 0; font-size:13px}
.sysrow .name{flex:0 0 132px; color:var(--dim)}
.bar{flex:1; height:8px; border-radius:6px; background:#0b0e1c; overflow:hidden; border:1px solid var(--line-soft)}
.bar > span{display:block; height:100%; background:linear-gradient(90deg, var(--nebula-blue), var(--gold))}
.sysrow .val{flex:0 0 34px; text-align:right; color:var(--gold)}
.syscomment{font-size:12.5px; color:var(--dim); margin:2px 0 12px 142px}

.tags{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px}
.pill{font-size:12px; border-radius:999px; padding:3px 10px; border:1px solid var(--line-soft); color:var(--dim)}
.pill.good{color:var(--good); border-color:rgba(143,224,176,.35)}
.pill.warn{color:var(--warn); border-color:rgba(240,194,107,.35)}
.pill.mix{color:var(--nebula-violet); border-color:rgba(157,123,214,.35)}

.softbox{border:1px solid var(--line-soft); border-radius:12px; padding:14px; background:rgba(150,160,210,.04); margin:14px 0}
.softbox h2{color:var(--gold)}

.notice-badge{
  margin-top:8px; padding:9px 12px; border-radius:10px;
  background:rgba(240,194,107,.10); border:1px solid rgba(240,194,107,.45);
  color:var(--warn); font-size:11.5px; line-height:1.7; font-weight:600;
}
.warnbox{border:1px solid rgba(240,194,107,.45); border-radius:12px; padding:14px; background:rgba(240,194,107,.08); margin:14px 0}
.warnbox h2{color:var(--warn); margin:0 0 7px}
.warnbox .body{font-size:13px; color:var(--ink)}

.status-badge{display:inline-block; font-size:10.5px; border-radius:999px; padding:2px 10px; margin-left:6px}
.status-badge.ok{color:var(--good); border:1px solid rgba(143,224,176,.4)}
.status-badge.beta{color:var(--warn); border:1px solid rgba(240,194,107,.4)}
.status-badge.no{color:var(--dim2); border:1px solid var(--line-soft)}
.status-badge.plan{color:var(--nebula-violet); border:1px solid rgba(157,123,214,.35)}
.systems-list{list-style:none; padding:0; margin:0}
.systems-list li{display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px}
.systems-list li:last-child{border-bottom:none}
.systems-list .disabled{color:var(--dim2)}
.roadmap-caveat{font-size:11.5px; color:var(--dim2); margin:10px 0 0; line-height:1.7; border-top:1px solid var(--line-soft); padding-top:10px}

/* 精度注意ボックス（四柱推命βなど） */
.warnbox{border:1px solid rgba(240,194,107,.45); border-radius:12px; padding:12px 14px; margin:10px 0 16px; background:rgba(240,194,107,.06)}
.warnbox .warn-title{color:var(--warn); font-size:12.5px; font-weight:700; letter-spacing:.04em; margin:0 0 6px}
.warnbox ul{margin:0; padding-left:18px}
.warnbox li{font-size:12px; color:var(--dim); line-height:1.7; margin:3px 0}
.warnbox p{font-size:12px; color:var(--dim); line-height:1.7; margin:0}
.notice-badge{border:1px solid rgba(240,194,107,.45); border-radius:10px; padding:8px 10px; margin-top:6px; background:rgba(240,194,107,.07); color:var(--warn); font-size:11px; line-height:1.7}

details.raw{margin-top:22px; color:var(--dim2); font-size:12px}
details.raw pre{background:#080a14; border:1px solid var(--line-soft); border-radius:8px; padding:10px; overflow:auto}

/* レスポンシブ */
@media (max-width:640px){
  body{font-size:14.5px}
  .brand{font-size:24px; letter-spacing:.12em}
  .card{padding:18px; border-radius:14px}
  .grid2{grid-template-columns:1fr}
  .sysrow{flex-wrap:wrap}
  .sysrow .name{flex-basis:100%}
  .syscomment{margin-left:0}
  .score-hero .num{font-size:40px}
}
@media (max-width:380px){
  .wrap{padding:0 12px 60px}
  .chip span{padding:6px 12px; font-size:12.5px}
}