/* MyPage UI - reading screen taste: soft, bright, not pure black/white */
:root{
  --np-text:#1e1e1e;
  --np-muted:rgba(30,30,30,.72);
  --np-border:rgba(0,0,0,.10);
  --np-card:rgba(255,255,255,.72);
  --np-card-strong:rgba(255,255,255,.84);
  --np-shadow:0 8px 22px rgba(0,0,0,.06);
  --np-radius:16px;
}

/* Theme backgrounds */
html[data-np-theme="paper"] { --np-bg:#fbf7ef; --np-accent:#b08968; }
html[data-np-theme="sakura"]{ --np-bg:#fff1f6; --np-accent:#c76d8d; }
html[data-np-theme="mint"]  { --np-bg:#eefbf2; --np-accent:#2c8a63; }
html[data-np-theme="sora"]  { --np-bg:#eef6ff; --np-accent:#357ab8; }
html[data-np-theme="asahi"] { --np-bg:#fff6e5; --np-accent:#c98a1a; }

body{
  background:var(--np-bg);
  color:var(--np-text);
}

.np-wrap{
  max-width: 880px;
  margin: 0 auto;
  padding: 14px 14px 40px;
}

.np-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 8px 0 14px;
}

.np-title{
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0;
}

.np-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.np-btn{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--np-border);
  background: var(--np-card-strong);
  text-decoration:none;
  color: var(--np-text);
  box-shadow: var(--np-shadow);
  font-weight: 650;
}

.np-btn.secondary{
  background: rgba(255,255,255,.55);
  font-weight: 600;
}

.np-card{
  background: var(--np-card);
  border: 1px solid var(--np-border);
  border-radius: var(--np-radius);
  box-shadow: var(--np-shadow);
  padding: 14px;
  margin: 12px 0;
}

.np-h2{
  font-size: 1.05rem;
  margin: 0 0 10px;
}

.np-muted{ color: var(--np-muted); font-size: .95rem; }
.np-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.np-chip{
  display:inline-block;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--np-border);
  background: rgba(255,255,255,.70);
  text-decoration:none;
  color: var(--np-text);
}

.np-list{ margin: 0; padding-left: 18px; }
.np-list li{ margin: 8px 0; }
.np-list a{ color: var(--np-accent); font-weight: 700; text-decoration: none; }
.np-list a:hover{ text-decoration: underline; }

.np-form label{ display:block; margin: 10px 0; font-weight: 650; }
.np-form input, .np-form textarea{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--np-border);
  background: rgba(255,255,255,.85);
  color: var(--np-text);
}
.np-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 720px){
  .np-grid{ grid-template-columns: 1fr 1fr; }
}

/* keep existing site header/nav as-is, but add spacing if their styles are minimal */
header, nav{ color: inherit; }