@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap');

#np-mypage-root{
  --np-bg:#fdf8f6; --np-surface:#ffffff; --np-surface-alt:#fdf1f4;
  --np-border:#f1dce3; --np-border-soft:#f6e9ee;
  --np-text:#40383c; --np-text-dim:#a3949b;
  --np-pink:#ef9fc0; --np-pink-deep:#e07aa5;
  --np-lavender:#c6b3e6;
  max-width:480px;margin:0 auto;
  font-family:"Zen Kaku Gothic New",-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  color:var(--np-text);
  background:var(--np-bg);
  border-radius:20px;
  overflow:hidden;
  min-height:520px;
  position:relative;
}
#np-mypage-root *{box-sizing:border-box;}

/* ログイン画面 */
#np-mypage-root .np-login{padding:60px 28px;text-align:center;}
#np-mypage-root .np-login-logo{font-size:40px;margin-bottom:8px;}
#np-mypage-root .np-login-title{font-size:19px;font-weight:900;margin-bottom:24px;}

/* 共通フォーム部品 */
#np-mypage-root .np-input{
  display:block;width:100%;padding:14px 16px;margin-bottom:12px;
  border:1.5px solid var(--np-border);border-radius:14px;
  font-size:14px;font-family:inherit;background:var(--np-surface);color:var(--np-text);
  resize:vertical;
}
#np-mypage-root .np-input:focus{outline:none;border-color:var(--np-pink);}
#np-mypage-root .np-btn-primary{
  display:block;width:100%;padding:15px;border:none;border-radius:99px;
  background:linear-gradient(120deg,var(--np-pink),var(--np-lavender));
  color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;
  box-shadow:0 8px 20px rgba(224,122,165,.25);
}
#np-mypage-root .np-btn-logout{background:var(--np-surface-alt);color:var(--np-text-dim);box-shadow:none;border:1.5px solid var(--np-border);}
#np-mypage-root .np-error{color:var(--np-pink-deep);font-size:13px;margin-bottom:14px;text-align:center;}
#np-mypage-root .np-loading, #np-mypage-root .np-empty{padding:30px;text-align:center;color:var(--np-text-dim);font-size:13px;}

/* アプリシェル */
#np-mypage-root .np-app{display:flex;flex-direction:column;min-height:520px;}
#np-mypage-root .np-screen{flex:1;padding:20px 16px 90px;overflow-y:auto;}
#np-mypage-root .np-nav{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;background:var(--np-surface);border-top:1px solid var(--np-border-soft);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));
}
#np-mypage-root .np-nav-btn{
  flex:1;background:none;border:none;font-size:19px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--np-text-dim);
  padding:4px 0;font-family:inherit;
}
#np-mypage-root .np-nav-btn span{font-size:10px;}
#np-mypage-root .np-nav-btn.active{color:var(--np-pink-deep);font-weight:700;}
#np-mypage-root .np-nav-add{color:#fff;}
#np-mypage-root .np-nav-add span{color:var(--np-text-dim);}

/* カード共通 */
#np-mypage-root .np-card{
  background:var(--np-surface);border:1px solid var(--np-border-soft);border-radius:20px;
  padding:18px 16px;margin-bottom:14px;box-shadow:0 8px 24px rgba(224,122,165,.06);
}
#np-mypage-root .np-card-label{font-size:12px;font-weight:700;color:var(--np-pink-deep);margin-bottom:10px;}
#np-mypage-root .np-list{
  background:var(--np-surface-alt);border:1px solid var(--np-border-soft);
  border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.85;color:var(--np-text);
}

/* ホーム */
#np-mypage-root .np-greeting{font-size:19px;font-weight:900;margin-bottom:2px;}
#np-mypage-root .np-greeting-sub{font-size:12.5px;color:var(--np-text-dim);margin-bottom:18px;}
#np-mypage-root .np-todo-item{
  background:var(--np-surface-alt);border-radius:12px;padding:12px 14px;margin-bottom:8px;font-size:13.5px;
}
#np-mypage-root .np-todo-empty{color:var(--np-text-dim);}
#np-mypage-root .np-month-grid{display:flex;justify-content:space-around;text-align:center;}
#np-mypage-root .np-month-num{font-size:22px;font-weight:900;color:var(--np-pink-deep);}
#np-mypage-root .np-month-label{font-size:11px;color:var(--np-text-dim);margin-top:2px;}
#np-mypage-root .np-consult-card{text-align:center;}
#np-mypage-root .np-consult-sub{font-size:12.5px;color:var(--np-text-dim);margin-bottom:14px;line-height:1.6;}
#np-mypage-root .np-consult-history-item{
  background:var(--np-surface-alt);border-radius:12px;padding:12px 14px;margin-bottom:8px;
}
#np-mypage-root .np-consult-history-item:last-child{margin-bottom:0;}
#np-mypage-root .np-consult-history-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
#np-mypage-root .np-consult-history-date{font-size:11px;color:var(--np-text-dim);}
#np-mypage-root .np-status-pill{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:99px;}
#np-mypage-root .np-status-open{background:#fff;color:var(--np-pink-deep);}
#np-mypage-root .np-status-resolved{background:#fff;color:var(--np-text-dim);}
#np-mypage-root .np-consult-history-message{font-size:12.5px;color:var(--np-text);line-height:1.6;white-space:pre-wrap;}
#np-mypage-root .np-consult-history-reply{
  margin-top:8px;padding:10px 12px;background:#fff;border-radius:10px;
  font-size:12.5px;color:var(--np-text);line-height:1.6;white-space:pre-wrap;
}
#np-mypage-root .np-consult-history-reply-label{font-size:10px;font-weight:700;color:var(--np-pink-deep);margin-bottom:3px;}

/* お客様一覧 */
#np-mypage-root .np-filter-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px;}
#np-mypage-root .np-filter-pill{
  flex:0 0 auto;padding:8px 14px;border-radius:99px;border:1.5px solid var(--np-border);
  background:var(--np-surface);font-size:12px;font-weight:700;color:var(--np-text-dim);cursor:pointer;font-family:inherit;
  white-space:nowrap;
}
#np-mypage-root .np-filter-pill.active{background:var(--np-pink);border-color:var(--np-pink);color:#fff;}
#np-mypage-root .np-customer-card{
  background:var(--np-surface);border:1px solid var(--np-border-soft);border-radius:18px;
  padding:14px 16px;margin-bottom:10px;cursor:pointer;
}
#np-mypage-root .np-customer-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;flex-wrap:wrap;gap:4px;}
#np-mypage-root .np-customer-name{font-size:15px;font-weight:700;}
#np-mypage-root .np-prospect{font-size:11.5px;color:var(--np-pink-deep);}
#np-mypage-root .np-customer-card-row{font-size:12.5px;color:var(--np-text-dim);margin-bottom:2px;}
#np-mypage-root .np-customer-note{font-size:12.5px;margin-top:6px;color:var(--np-text);}
#np-mypage-root .np-fab{
  position:absolute;right:16px;bottom:86px;
  padding:12px 18px;border:none;border-radius:99px;
  background:linear-gradient(120deg,var(--np-pink),var(--np-lavender));color:#fff;
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
  box-shadow:0 10px 24px rgba(224,122,165,.35);
}

/* お客様詳細 */
#np-mypage-root .np-back{background:none;border:none;color:var(--np-text-dim);font-size:12.5px;margin-bottom:12px;cursor:pointer;font-family:inherit;padding:0;}
#np-mypage-root .np-detail-hero{text-align:center;}
#np-mypage-root .np-detail-name{font-size:19px;font-weight:900;margin-bottom:6px;}
#np-mypage-root .np-detail-prospect{font-size:12.5px;color:var(--np-pink-deep);margin-bottom:8px;}
#np-mypage-root .np-detail-row{font-size:12.5px;color:var(--np-text-dim);margin-bottom:4px;}
#np-mypage-root .np-next-topic{
  margin-top:14px;padding:14px;border-radius:14px;background:var(--np-surface-alt);
  border-left:3px solid var(--np-pink);text-align:left;font-size:14px;font-weight:700;
}
#np-mypage-root .np-next-topic-label{font-size:10.5px;color:var(--np-pink-deep);font-weight:700;margin-bottom:4px;}
#np-mypage-root .np-timeline-item{font-size:12.5px;padding:8px 0;border-bottom:1px solid var(--np-border-soft);}
#np-mypage-root .np-timeline-item:last-child{border-bottom:none;}
#np-mypage-root .np-timeline-date{color:var(--np-pink-deep);font-weight:700;margin-right:8px;}

/* 日記 */
#np-mypage-root .np-mood-row{display:flex;gap:8px;margin-bottom:18px;}
#np-mypage-root .np-mood-btn{
  flex:1;padding:12px 0;font-size:22px;border-radius:14px;border:1.5px solid var(--np-border);
  background:var(--np-surface);cursor:pointer;
}
#np-mypage-root .np-mood-btn.active{border-color:var(--np-pink);background:var(--np-surface-alt);}
#np-mypage-root .np-checkbox-list{margin-bottom:16px;}
#np-mypage-root .np-checkbox-row{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:13.5px;}

/* わたし: おすすめのお店 */
#np-mypage-root .np-store-card{
  background:var(--np-surface-alt);border:1px solid var(--np-border-soft);border-radius:14px;
  padding:12px 14px;margin-bottom:8px;
}
#np-mypage-root .np-store-card:last-child{margin-bottom:0;}
#np-mypage-root .np-store-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;}
#np-mypage-root .np-store-name{font-size:13.5px;font-weight:700;color:var(--np-text);}
#np-mypage-root .np-store-fit{font-size:11.5px;font-weight:700;color:var(--np-pink-deep);white-space:nowrap;}
#np-mypage-root .np-wage-badge{
  display:inline-block;margin-top:6px;font-size:11px;font-weight:700;padding:4px 11px;border-radius:99px;
  background:linear-gradient(120deg,var(--np-pink),var(--np-lavender));color:#fff;
}

/* 成長 */
#np-mypage-root .np-activity-card{text-align:center;}
#np-mypage-root .np-activity-score{
  font-size:42px;font-weight:900;color:var(--np-pink-deep);line-height:1;margin-top:4px;
}
#np-mypage-root .np-activity-score-label{font-size:11px;color:var(--np-text-dim);margin-top:4px;letter-spacing:.08em;}
#np-mypage-root .np-growth-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
#np-mypage-root .np-star-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:13px;}
#np-mypage-root .np-star-name{color:var(--np-text);}
#np-mypage-root .np-star-stars{color:var(--np-pink);letter-spacing:1px;}
#np-mypage-root .np-result-code-small{font-size:11px;color:var(--np-text-dim);letter-spacing:.1em;margin-bottom:4px;}
#np-mypage-root .np-public-url{
  font-size:11.5px;color:var(--np-pink-deep);background:var(--np-surface-alt);border-radius:10px;
  padding:9px 12px;margin-bottom:12px;word-break:break-all;
}

/* 診断を受ける */
#np-mypage-root .np-retake-card{text-align:center;}
#np-mypage-root .np-link-btn{
  background:none;border:none;color:var(--np-pink-deep);font-size:12.5px;font-weight:700;
  cursor:pointer;font-family:inherit;padding:4px;text-decoration:underline;
}
#np-mypage-root #np-diag-progress-bg{height:6px;background:var(--np-border-soft);border-radius:99px;overflow:hidden;margin-bottom:16px;}
#np-mypage-root #np-diag-progress{height:100%;background:linear-gradient(90deg,var(--np-pink),var(--np-lavender));border-radius:99px;transition:width .35s ease;}
#np-mypage-root .np-diag-qnum{font-size:11px;color:var(--np-pink-deep);letter-spacing:.14em;margin-bottom:10px;font-weight:700;}
#np-mypage-root .np-diag-qtext{font-size:15px;font-weight:700;margin-bottom:18px;line-height:1.7;}
#np-mypage-root .np-diag-choice{
  background:var(--np-surface);border:1.5px solid var(--np-border);border-radius:14px;
  padding:13px 14px;font-size:13.5px;cursor:pointer;margin-bottom:9px;
  display:flex;align-items:center;gap:10px;transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
#np-mypage-root .np-diag-choice:hover{border-color:var(--np-pink);background:var(--np-surface-alt);}
#np-mypage-root .np-diag-choice.selected{
  border-color:var(--np-pink-deep);background:var(--np-surface-alt);transform:scale(1.01);
}
#np-mypage-root .np-diag-num{
  display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--np-border);color:var(--np-text-dim);font-size:10.5px;font-weight:700;
  flex-shrink:0;background:var(--np-surface);
}
#np-mypage-root .np-diag-choice.selected .np-diag-num{
  background:linear-gradient(135deg,var(--np-pink),var(--np-lavender));color:#fff;border-color:transparent;
}

/* モーダル */
#np-mypage-root .np-modal-overlay{
  position:absolute;inset:0;background:rgba(64,56,60,.4);
  display:flex;align-items:flex-end;z-index:20;
}
#np-mypage-root .np-modal{
  width:100%;background:var(--np-surface);border-radius:24px 24px 0 0;padding:24px 20px 28px;
}
#np-mypage-root .np-modal-title{font-size:16px;font-weight:900;margin-bottom:16px;}
#np-mypage-root .np-prospect-select{display:flex;gap:8px;margin-bottom:12px;}
#np-mypage-root .np-prospect-btn{
  flex:1;padding:10px 0;border-radius:12px;border:1.5px solid var(--np-border);
  background:var(--np-surface);font-size:12.5px;cursor:pointer;font-family:inherit;
}
#np-mypage-root .np-prospect-btn.active{border-color:var(--np-pink);background:var(--np-surface-alt);}