:root {
  --bg: #F2F2F7;
  --card: #ffffff;
  --text: #0f172a;    /* text-slate-900 */
  --text2: #475569;   /* text-slate-600 */
  --muted: #64748b;   /* text-slate-500 */
  --muted2: #94a3b8;  /* text-slate-400 */
  --border: #f1f5f9;  /* slate-100 */
  --border2: #e2e8f0; /* slate-200 */
  --sb: #0f172a;
  --gold: #d4882e;
  --gold-lt: #fff8ec;
  --teal: #2a9d8f;
  --teal-lt: #e6f7f5;
  --red: #e53e3e;
  --red-lt: #fef2f2;
  --amber: #f59e0b;
  --amber-lt: #fffbeb;
  --blue: #2563eb;
  --blue-lt: #dbeafe;
  --purple: #8b5cf6;
  --r: 1rem;
  --r-sm: 0.75rem;
  --shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* â”€â”€ PLAN HEADER (care plan mode) â”€â”€ */
#plan-header-area{background:white;border-bottom:1px solid var(--border);padding:14px 22px;flex-shrink:0}
.plan-meta-row{display:flex;gap:0;border:1px solid var(--border2);border-radius:8px;overflow:hidden;margin-bottom:10px}
.plan-meta-cell{padding:9px 14px;border-right:1px solid var(--border2);flex:1}
.plan-meta-cell:last-child{border-right:none}
.plan-meta-label{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);margin-bottom:3px}
.plan-meta-val{font-size:0.85rem;font-weight:700;color:var(--text)}
.plan-meta-val.ja{font-size:0.72rem;color:var(--muted);font-weight:400;margin-top:1px}
.plan-meta-cell.hl{background:var(--gold-lt)}
.plan-tabs{display:flex;border-bottom:1px solid var(--border);gap:0}
.plan-tab{padding:8px 16px;font-size:0.79rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.15s;white-space:nowrap}
.plan-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.plan-tab:hover:not(.active){color:var(--text)}
.hoso-bar{display:none;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--border);background:var(--bg)}

/* â”€â”€ CONTENT â”€â”€ */
.content{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
.content::-webkit-scrollbar{width:4px}
.content::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px}
.page{padding:20px 22px}
.plan-page{padding:18px 22px}

/* â”€â”€ BUTTONS â”€â”€ */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:var(--r-sm);font-size:0.8rem;font-weight:600;cursor:pointer;border:none;transition:all 0.15s}
.btn-primary{background:var(--gold);color:white}.btn-primary:hover{background:#c07828}
.btn-secondary{background:white;color:var(--text2);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg)}
.btn-teal{background:var(--teal);color:white}.btn-teal:hover{opacity:0.9}
.btn-ghost{background:none;border:1px solid var(--border);color:var(--muted)}.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:5px 10px;font-size:0.75rem}
.btn-danger{background:var(--red);color:white}

/* â”€â”€ CARDS â”€â”€ */
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--border);box-shadow:var(--shadow)}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);gap:10px;background:white;}
.card-title{font-size:1.125rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.card-title .ja{font-size:0.7rem;font-weight:400;color:var(--muted)}

/* â”€â”€ STAT CARDS â”€â”€ */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.stat-card{background:var(--card);border-radius:var(--r);border:1px solid var(--border);padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--gold));border-radius:var(--r) var(--r) 0 0}
.stat-label{font-size:0.7rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:7px}
.stat-val{font-size:1.7rem;font-weight:700;color:var(--text);line-height:1;margin-bottom:4px}
.stat-change{font-size:0.7rem;color:var(--muted);display:flex;align-items:center;gap:3px}
.stat-change.up{color:var(--teal)}.stat-change.warn{color:var(--amber)}
.stat-icon{position:absolute;right:16px;top:16px;font-size:1.5rem;opacity:0.15}

/* â”€â”€ GRIDS â”€â”€ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-65{display:grid;grid-template-columns:65fr 35fr;gap:14px}
.grid-55{display:grid;grid-template-columns:55fr 45fr;gap:14px}
.mb14{margin-bottom:14px}.mb18{margin-bottom:18px}

/* â”€â”€ TABLES â”€â”€ */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted2);padding:14px 16px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;background:white}
@media (min-width: 1024px) {
  thead th { padding: 16px 24px; }
  tbody td { padding: 16px 24px; }
}
tbody td{padding:14px 16px;border-bottom:1px solid var(--border);font-size:0.875rem;font-weight:500;color:var(--muted);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(248, 250, 252, 0.5)}

/* â”€â”€ BADGES â”€â”€ */
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:0.68rem;font-weight:700}
.badge-teal{background:var(--teal-lt);color:#1a7a70}
.badge-red{background:var(--red-lt);color:var(--red)}
.badge-amber{background:var(--amber-lt);color:#92670a}
.badge-blue{background:var(--blue-lt);color:var(--blue)}
.badge-purple{background:#f5f3ff;color:var(--purple)}
.badge-gray{background:#f1f5f9;color:var(--muted)}
.badge-gold{background:var(--gold-lt);color:var(--gold)}
.badge-green{background:#f0fdf4;color:#16a34a}

/* â”€â”€ TABS â”€â”€ */
.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:16px}
.tab-item{padding:9px 16px;font-size:0.8rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.15s}
.tab-item.active{color:var(--gold);border-bottom-color:var(--gold)}
.tab-item:hover:not(.active){color:var(--text)}

/* â”€â”€ PROGRESS â”€â”€ */
.prog-bar{height:6px;background:#e9ecef;border-radius:10px;overflow:hidden}
.prog-fill{height:100%;border-radius:10px;background:var(--teal);transition:width 0.3s}

/* â”€â”€ ALERTS â”€â”€ */
.alert-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-sm);margin-bottom:7px;border-left:3px solid var(--ac)}
.alert-item.warn{background:var(--amber-lt);--ac:var(--amber)}
.alert-item.danger{background:var(--red-lt);--ac:var(--red)}
.alert-item.info{background:var(--blue-lt);--ac:var(--blue)}
.alert-item.success{background:var(--teal-lt);--ac:var(--teal)}
.alert-title{font-weight:700;margin-bottom:2px;font-size:0.8rem}
.alert-text{font-size:0.78rem;color:var(--text2);flex:1}

/* â”€â”€ ACTIVITY FEED â”€â”€ */
.activity-item{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border)}
.activity-item:last-child{border-bottom:none}
.activity-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);margin-top:5px;flex-shrink:0}
.activity-dot.warn{background:var(--amber)}.activity-dot.red{background:var(--red)}.activity-dot.gray{background:var(--muted2)}

/* â”€â”€ AVATAR â”€â”€ */
.av{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:0.68rem;font-weight:700;color:white;flex-shrink:0}
.person-cell{display:flex;align-items:center;gap:9px}
.person-name{font-size:0.82rem;font-weight:600;color:var(--text)}
.person-detail{font-size:0.7rem;color:var(--muted)}

/* â”€â”€ SCHEDULE â”€â”€ */
.sched-grid{display:grid;grid-template-columns:90px repeat(7,1fr);gap:4px;margin-bottom:3px}
.sched-hdr{font-size:0.68rem;font-weight:700;color:var(--muted);text-align:center;padding:3px 0}
.slot{border-radius:5px;padding:5px 7px;font-size:0.66rem;font-weight:600;text-align:center;cursor:pointer}
.slot.am{background:#dbeafe;color:#1d4ed8}.slot.pm{background:#dcfce7;color:#15803d}.slot.night{background:#ede9fe;color:#6d28d9}.slot.off{background:#f1f5f9;color:var(--muted2)}

/* â”€â”€ CARE PLAN SPECIFIC â”€â”€ */
.assess-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.assess-block{background:var(--bg);border-radius:8px;padding:12px;border:1px solid var(--border)}
.assess-label{font-size:0.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:7px;display:flex;align-items:center;justify-content:space-between}
.assess-label .ja{font-size:0.68rem;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted2)}
.assess-ta{width:100%;border:1px solid var(--border2);border-radius:5px;padding:7px 9px;font-size:0.79rem;color:var(--text2);font-family:inherit;resize:vertical;min-height:72px;background:white;line-height:1.55}
.assess-ta:focus{outline:none;border-color:var(--gold)}
.policy-block{background:linear-gradient(to right,var(--teal-lt),white);border:1px solid rgba(42,157,143,0.2);border-left:3px solid var(--teal);border-radius:7px;padding:12px 14px}
.policy-label{font-size:0.7rem;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:7px}
.policy-ta{width:100%;border:1px solid rgba(42,157,143,0.2);border-radius:5px;padding:7px;font-size:0.8rem;color:var(--text2);font-family:inherit;resize:vertical;min-height:54px;background:white;line-height:1.55}
.policy-ta:focus{outline:none;border-color:var(--teal)}

/* goals table */
.gtbl-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--border)}
.gtbl{width:100%;border-collapse:collapse;min-width:1050px}
.gtbl thead th{background:#f8f9fa;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:0.1em;padding:16px 12px;text-align:center;border-right:1px solid var(--border);border-bottom:1px solid var(--border);white-space:nowrap}
.gtbl thead th:last-child{border-right:none}
.gtbl thead th .ja{display:block;font-size:0.64rem;font-weight:400;opacity:0.6;text-transform:none;letter-spacing:0;margin-top:1px}
.gtbl tbody td{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:0;vertical-align:top}
.gtbl tbody tr:last-child td{border-bottom:none}
.gtbl tbody td:last-child{border-right:none}
.gtbl tbody tr:hover{background:rgba(248, 250, 252, 0.5)}
.td-in{padding:9px 10px;height:100%}
.td-ta{width:100%;border:1px solid var(--border2);border-radius:4px;padding:6px 8px;font-size:0.77rem;color:var(--text2);font-family:inherit;resize:vertical;min-height:76px;line-height:1.5;background:white}
.td-ta:focus{outline:none;border-color:var(--gold)}
.td-input{width:100%;border:1px solid var(--border2);border-radius:4px;padding:4px 6px;font-size:0.71rem;font-family:inherit;background:white;color:var(--text2);margin-top:5px}
.td-select{border:1px solid var(--border2);border-radius:4px;padding:4px 6px;font-size:0.74rem;font-family:inherit;background:white;width:100%;color:var(--text2);cursor:pointer}
.add-goal-row{width:100%;padding:9px;text-align:center;color:var(--muted);font-size:0.79rem;cursor:pointer;border-top:1px dashed var(--border2);background:none;border-left:none;border-right:none;border-bottom:none;font-family:inherit;font-weight:500;transition:all 0.15s}
.add-goal-row:hover{color:var(--gold);background:var(--gold-lt)}

/* activities grid */
.act-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.act-card{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;cursor:pointer;transition:all 0.15s}
.act-card:hover{border-color:var(--gold);background:var(--gold-lt)}
.act-card.sel{border-color:var(--teal);background:var(--teal-lt)}
.act-time{font-size:0.66rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:3px}
.act-name{font-size:0.82rem;font-weight:700;color:var(--text);margin-bottom:2px}
.act-detail{font-size:0.7rem;color:var(--muted)}

/* med checks */
.med-chk{width:21px;height:21px;border-radius:4px;border:1.5px solid var(--border2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.72rem;transition:all 0.15s;margin:auto}
.med-chk.done{background:var(--teal);border-color:var(--teal);color:white}

/* review/sign */
.review-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.review-block{border:1px solid var(--border2);border-radius:7px;padding:12px}
.review-label{font-size:0.66rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);margin-bottom:7px;padding-bottom:7px;border-bottom:1px solid var(--border)}
.sign-area{height:52px;border:1px dashed var(--border2);border-radius:4px;display:flex;align-items:center;justify-content:center;margin-top:7px;cursor:pointer;transition:all 0.15s;flex-direction:column;gap:3px}
.sign-area:hover{border-color:var(--gold);background:var(--gold-lt)}

/* history */
.hist-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border)}
.hist-item:last-child{border-bottom:none}
.hist-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);border:2px solid var(--gold);margin-top:3px;flex-shrink:0}
.hist-dot.old{background:var(--muted2);border-color:var(--border2)}


