:root {
    --primary: #0f172a;
    --primary-light: #1e293b;
    --accent-blue: #0284c7;
    --accent-red: #e63946;
    --accent-gold: #d97706;
    --accent-green: #16a34a;
    --bg-light: #f8fafc;
    --card-bg: #ffffff;
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --border: #e2e8f0;
  }
body.is-mypage {
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.5;
    padding-bottom: 24px;
  }
  body.is-mypage .sticky-cta { display: none; }
  .portal-page {
    font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', Meiryo, sans-serif;
    -webkit-tap-highlight-color: transparent;
    padding: 12px 10px 40px;
  }
  .portal-page .container { max-width: 560px; margin: 0 auto; }

  .view-section { display: none; }
  .view-section.active { display: block; animation: fadeIn 0.2s ease-in-out; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

  .sub-nav-tabs { display: flex; gap: 4px; margin-bottom: 14px; background: #e2e8f0; padding: 4px; border-radius: 10px; flex-wrap: wrap; }
  .sub-nav-btn { flex: 1 1 30%; min-width: 28%; padding: 10px 4px; font-size: 0.74rem; font-weight: bold; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: #64748b; text-align: center; }
  .sub-nav-btn.active { background: #fff; color: var(--primary); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }

  .tab-pane-content { display: none; }
  .tab-pane-content.active { display: block; animation: fadeIn 0.2s ease-in-out; }

  .card { background: var(--card-bg); border-radius: 14px; padding: 16px; margin-bottom: 14px; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }
  .card-title { font-size: 0.95rem; font-weight: 800; color: var(--primary); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
  .card-title-icon { display: flex; align-items: center; gap: 6px; }
  .card-title-icon::before { content: ""; width: 4px; height: 14px; background: var(--accent-blue); border-radius: 2px; }

  .form-group { margin-bottom: 12px; text-align: left; }
  .form-group label { display: block; font-size: 0.8rem; font-weight: bold; margin-bottom: 4px; color: #475569; }
  .form-control { width: 100%; padding: 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.95rem; background: #fff; }
  .form-control:focus { outline: none; border-color: var(--accent-blue); }

  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

  .btn-submit { width: 100%; background: var(--primary); color: #fff; border: none; padding: 13px; font-size: 1rem; font-weight: bold; border-radius: 8px; cursor: pointer; margin-top: 6px; }
  .btn-submit:active { transform: scale(0.98); }
  .auth-box { text-align: center; padding: 24px 16px; }
  .brand-logo { font-size: 1.35rem; font-weight: 900; letter-spacing: 2px; color: var(--primary); margin-bottom: 4px; }
  .link-toggle { font-size: 0.8rem; color: var(--accent-blue); text-decoration: underline; margin-top: 12px; display: inline-block; cursor: pointer; }

  .diet-badge { font-size: 0.78rem; font-weight: 800; background: #fef3c7; color: #b45309; padding: 3px 8px; border-radius: 6px; border: 1px solid #fde68a; }
  .calorie-panel { background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .calorie-panel .val { font-size: 1.35rem; font-weight: 900; color: var(--accent-red); }

  .pfc-bar { height: 12px; border-radius: 6px; display: flex; overflow: hidden; margin-bottom: 10px; background: #e2e8f0; }
  .pfc-p { background: #ef4444; }
  .pfc-f { background: #f59e0b; }
  .pfc-c { background: #3b82f6; }
  .pfc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
  .pfc-cell { background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: 8px 4px; }
  .pfc-amount { font-size: 0.95rem; font-weight: 900; margin-top: 2px; }

  .food-cat-btn { border: 1px solid var(--border); background: #fff; color: #64748b; font-size: 0.72rem; font-weight: bold; padding: 5px 10px; border-radius: 20px; white-space: nowrap; cursor: pointer; }
  .food-cat-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

  .meal-slot-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
  .meal-slot-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 0.85rem; font-weight: bold; color: var(--primary); }
  .meal-item-row { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 10px; margin-bottom: 4px; font-size: 0.78rem; }
  .btn-item-del { background: none; border: none; color: #ef4444; font-weight: bold; cursor: pointer; padding: 0 4px; }

  .ai-camera-card { background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%); border: 1.5px dashed #0284c7; border-radius: 12px; padding: 14px; margin-bottom: 14px; text-align: center; }
  .ai-photo-actions { display: flex; flex-direction: column; gap: 8px; }
  .btn-ai-camera, .btn-ai-library { color: #fff; border: none; padding: 11px 18px; border-radius: 8px; font-size: 0.88rem; font-weight: 900; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; -webkit-appearance: none; width: 100%; }
  .btn-ai-camera { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25); }
  .btn-ai-library { background: linear-gradient(135deg, #0f172a 0%, #334155 100%); }
  .btn-ai-camera:active, .btn-ai-library:active { transform: scale(0.98); }
  .br-ops-notice { background: #fffbeb; border-color: #fcd34d; }
  .br-ops-notice-item { font-size: 0.82rem; margin-bottom: 10px; }
  .meal-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; margin-right: 8px; border: 1px solid #e2e8f0; }
  .ai-preview-box { display: none; margin-top: 10px; text-align: center; }
  .ai-preview-img { max-width: 100%; max-height: 180px; border-radius: 8px; border: 1px solid #cbd5e1; object-fit: cover; }
  .ai-loading-spinner { display: none; margin: 10px 0; color: #0284c7; font-weight: bold; font-size: 0.85rem; }

  .chart-box { position: relative; height: 250px; width: 100%; }

  .karte-item { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: #fff; }
  .karte-head { background: #f8fafc; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 0.85rem; font-weight: bold; }
  .karte-body { display: none; padding: 12px; background: #fff; border-top: 1px solid var(--border); font-size: 0.8rem; }
  .karte-body.open { display: block; }
  .comp-table, .menu-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 0.76rem; }
  .comp-table th, .comp-table td, .menu-table th, .menu-table td { border: 1px solid var(--border); padding: 5px; text-align: center; }
  .comp-table th { background: #f1f5f9; color: var(--primary); font-weight: bold; }
  .comp-table td { font-weight: bold; color: var(--primary); }
  .menu-table th { background: var(--primary); color: #fff; }
  .menu-table tr:nth-child(even) { background-color: #f8fafc; }
  .feedback-bubble { background: #f8fafc; border-left: 3px solid var(--accent-red); padding: 8px 10px; border-radius: 4px; margin-bottom: 6px; }
  .homework-bubble { background: #fefce8; border-left: 3px solid #ca8a04; padding: 8px 10px; border-radius: 4px; color: #854d0e; }

  .grade-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: 50%; font-size: 0.95rem; font-weight: 900; }
  .grade-ss { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
  .grade-s { background: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc; }
  .grade-a { background: #ffedd5; color: #c2410c; border: 1px solid #fdba74; }
  .grade-x { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
  .past-meal-legend { font-size: 0.68rem; color: #64748b; line-height: 1.45; margin-bottom: 10px; }
  .past-meal-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 8px 0; font-size: 0.72rem; text-align: center; }
  .past-meal-totals div { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 2px; }
  .btn-open-day { width: 100%; margin-top: 8px; background: #fff; color: #0284c7; border: 1px solid #0284c7; padding: 8px; border-radius: 6px; font-weight: bold; font-size: 0.8rem; cursor: pointer; }

  .br-mp-head { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color:#fff; border:none; padding:14px 16px; position: relative; }
  .br-mp-head-row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .br-mp-head-actions { display:flex; align-items:center; gap:10px; }
  .br-mp-logout { background:rgba(255,255,255,0.2); border:none; color:#fff; font-size:0.7rem; padding:3px 8px; border-radius:4px; margin-top:3px; display:inline-block; text-decoration:none; }
  .br-notice-bell { position:relative; width:40px; height:40px; border:none; border-radius:999px; background:rgba(255,255,255,0.12); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
  .br-notice-bell[aria-expanded="true"] { background:rgba(255,255,255,0.28); }
  .br-notice-dot { position:absolute; top:6px; right:6px; width:9px; height:9px; border-radius:50%; background:#ef4444; box-shadow:0 0 0 2px #1e293b; animation: br-notice-blink 1s ease-in-out infinite; }
  @keyframes br-notice-blink { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.2; transform:scale(0.75); } }
  .br-notice-panel { margin-top:12px; background:#fff; color:#0f172a; border-radius:10px; padding:12px; text-align:left; }
  .br-notice-panel-title { font-size:0.78rem; font-weight:900; color:#92400e; margin-bottom:8px; }
  .br-notice-item { border-bottom:1px solid #fde68a; padding:8px 0; font-size:0.82rem; }
  .br-notice-item:last-child { border-bottom:none; }
  .br-notice-item.is-unread strong { color:#b45309; }
  .br-notice-empty { font-size:0.8rem; color:#64748b; }

  .br-ai-lead { font-size:0.78rem; color:#475569; margin-bottom:12px; line-height:1.5; }
  .br-ai-pay-btn { background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); font-size:0.92rem; line-height:1.35; padding:14px 12px; }
  .br-ai-pay-note { font-size:0.72rem; color:#64748b; margin-top:8px; }
  .br-ai-day { border:1px solid var(--border); border-radius:10px; margin-bottom:8px; overflow:hidden; }
  .br-ai-day-head { width:100%; background:#f8fafc; border:none; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:0.85rem; cursor:pointer; color:var(--primary); }
  .br-ai-day-body { display:none; padding:10px 12px; border-top:1px solid var(--border); }
  .br-ai-day.open .br-ai-day-body { display:block; }
  .br-ai-meal { display:flex; gap:10px; padding:10px 0; border-bottom:1px dashed #e2e8f0; font-size:0.78rem; align-items:flex-start; }
  .br-ai-meal:last-child { border-bottom:none; }
  .br-ai-meal small { color:#64748b; display:block; }
  .br-ai-photo { width:72px; height:72px; object-fit:cover; border-radius:8px; background:#f1f5f9; flex-shrink:0; }
  .br-ai-photo.is-empty { display:flex; align-items:center; justify-content:center; font-size:0.65rem; color:#94a3b8; text-align:center; padding:6px; }
  .br-ai-meal-body { flex:1; min-width:0; }
  .br-ai-steps { margin:6px 0 8px 18px; padding:0; color:#334155; font-size:0.75rem; line-height:1.45; }
  .br-ai-log-day, .br-ai-log-one { display:block; width:100%; margin:0 0 10px; border:1px solid #bae6fd; background:#f0f9ff; color:#0369a1; border-radius:8px; padding:8px; font-weight:800; font-size:0.78rem; cursor:pointer; }
  .br-ai-log-one { width:auto; display:inline-block; margin:0; padding:6px 10px; font-size:0.72rem; }
  .br-shop-cat { margin-bottom:10px; }
  .br-shop-cat h4 { font-size:0.78rem; margin:0 0 6px; color:#0369a1; }
  .br-shop-item { display:flex; align-items:center; gap:8px; font-size:0.8rem; padding:4px 0; }
  .br-shop-item input { width:16px; height:16px; }
  .br-shop-item.is-done { text-decoration:line-through; color:#94a3b8; }
  .br-ai-hist { width:100%; text-align:left; border:1px solid var(--border); background:#fff; border-radius:8px; padding:10px 12px; margin-bottom:8px; cursor:pointer; }
  .br-ai-hist strong { display:block; font-size:0.82rem; }
  .br-ai-month-btn { background: linear-gradient(135deg, #0369a1 0%, #0f766e 100%); font-size:0.88rem; line-height:1.35; padding:13px 12px; }
  .br-modal { position:fixed; inset:0; z-index:80; background:rgba(15,23,42,0.55); display:flex; align-items:center; justify-content:center; padding:16px; }
  .br-modal[hidden] { display:none !important; }
  .br-modal-card { background:#fff; border-radius:14px; padding:18px 16px 16px; max-width:420px; width:100%; box-shadow:0 16px 40px rgba(15,23,42,0.25); }
  .br-modal-title { font-size:1.05rem; font-weight:900; color:var(--primary); margin-bottom:8px; }
  .br-report-warn { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; border-radius:8px; padding:8px 10px; font-size:0.8rem; margin:0 0 10px; }
  .br-reply-box { margin-top:12px; background:#f0f9ff; border:1px solid #bae6fd; border-radius:10px; padding:12px; font-size:0.82rem; color:#0f172a; }
  .br-reply-box strong { display:block; color:#0369a1; margin-bottom:6px; }
  .br-reply-box small { color:#64748b; }
  .br-ref-btn { display:block; text-align:center; text-decoration:none; background:linear-gradient(135deg, #b0892d 0%, #92400e 100%); margin:0 0 14px; }