@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.jd6-root {
  --navy: #2E4053;
  --navy-dark: #24333F;
  --line: #DEE3E7;
  --row-alt: #F7F8F9;
  --blue: #2E63C7;
  --red: #C0392B;
  --orange: #D68910;
  --green: #2E8B57;
  --gray: #7F8C8D;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #24333F;
  background: #fff;
  min-height: 100vh;
  position: relative;
}
.jd6-root * { box-sizing: border-box; }

/* ---- login ---- */
.jd6-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px 16px; background: linear-gradient(180deg, #F7F8F9 0%, #fff 100%); }
.jd6-login-box { width: 100%; max-width: 340px; border: 1px solid var(--line); border-radius: 6px; padding: 26px 24px; background: #fff; }
.jd6-login-title { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.jd6-login-sub { font-size: 11.5px; color: #8A96A0; margin-bottom: 18px; line-height: 1.6; }
.jd6-login-field { margin-bottom: 12px; }
.jd6-login-field label { display: block; font-size: 11.5px; font-weight: 600; margin-bottom: 5px; }
.jd6-login-field input { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 3px; font-size: 13px; font-family: 'Inter', sans-serif; background: #FAFBFC; }
.jd6-login-btn { width: 100%; background: var(--navy); color: #fff; border: none; padding: 10px; border-radius: 3px; cursor: pointer; font-weight: 700; font-size: 13px; margin-top: 6px; }
.jd6-login-btn:hover { background: var(--navy-dark); }
.jd6-login-btn:disabled { opacity: 0.6; cursor: default; }
.jd6-login-error { color: var(--red); font-size: 11.5px; margin-top: 8px; min-height: 14px; }

/* ---- app ---- */
.jd6-topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:10px; }
.jd6-topbar-title { font-weight:700; font-size:15px; }
.jd6-topbar-sub { font-size:11.5px; color:#8A96A0; margin-top:2px; }
.jd6-session { display:flex; align-items:center; gap:10px; }
.jd6-role-tag { font-size:11px; font-weight:700; padding:3px 10px; border-radius:12px; }
.jd6-role-tag.staff { background:#E6ECF3; color:var(--navy); }
.jd6-role-tag.client { background:#E1F0E6; color:var(--green); }
.jd6-logout-btn { font-size:11.5px; color:#8A96A0; background:none; border:1px solid var(--line); padding:5px 10px; border-radius:3px; cursor:pointer; }
.jd6-logout-btn:hover { color:var(--navy); border-color:var(--navy); }

.jd6-tabbar { display:flex; border-bottom:1px solid var(--line); padding:0 16px; gap:4px; }
.jd6-tab { padding:11px 14px; font-size:12.5px; font-weight:600; color:#7A8894; cursor:pointer; border-bottom:2px solid transparent; display:flex; align-items:center; gap:6px; }
.jd6-tab.active { color:var(--navy); border-color:var(--orange); }
.jd6-tab-badge { background:var(--red); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:8px; }

.jd6-toolbar2 { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; }
.jd6-add-btn { background:var(--navy); color:#fff; border:none; font-size:12px; font-weight:600; padding:7px 14px; border-radius:3px; cursor:pointer; }
.jd6-add-btn:hover { background:var(--navy-dark); }
.jd6-tab-desc { font-size:11.5px; color:#8A96A0; }

.jd6-list { padding:0 16px 20px; display:flex; flex-direction:column; gap:10px; max-width: 900px; margin: 0 auto; }
.jd6-empty { padding:50px 20px; text-align:center; color:#8A96A0; }
.jd6-empty button { margin-top:10px; background:var(--navy); color:#fff; border:none; padding:8px 16px; border-radius:3px; cursor:pointer; font-weight:600; font-size:12.5px; }

.jd6-card { border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.jd6-card-head { display:flex; justify-content:space-between; align-items:flex-start; padding:12px 14px 4px; gap:10px; flex-wrap:wrap; }
.jd6-card-title { font-weight:700; font-size:14px; }
.jd6-card-period { font-size:11.5px; color:#8A96A0; margin-top:2px; }
.jd6-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:3px; color:#fff; white-space:nowrap; }
.jd6-badge.pending { background:var(--orange); }
.jd6-badge.approved { background:var(--green); }
.jd6-badge.revision { background:var(--red); }

.jd6-images-row { display:flex; gap:6px; padding:8px 14px 4px; flex-wrap:wrap; }
.jd6-image-thumb { width:64px; height:48px; border-radius:3px; object-fit:cover; border:1px solid var(--line); cursor:pointer; background:#F0F2F4; }
.jd6-image-thumb:hover { opacity:0.85; }
.jd6-images-empty { font-size:11px; color:#B0BAC2; padding:8px 14px 4px; }

.jd6-media-row { padding:8px 14px 10px; display:flex; gap:4px; flex-wrap:wrap; }
.jd6-media-chip { font-size:10.5px; border:1px solid var(--line); color:#5C6975; border-radius:8px; padding:1px 7px; }

.jd6-content-box { margin:0 14px 10px; background:var(--row-alt); border:1px solid #EEF0F2; border-radius:3px; padding:10px 12px; font-size:12.5px; line-height:1.7; white-space:pre-wrap; max-height:88px; overflow:hidden; }
.jd6-content-box.expanded { max-height:none; }
.jd6-content-toggle { font-size:11.5px; color:var(--blue); cursor:pointer; padding:0 14px 10px; }

.jd6-metrics-row { display:flex; gap:18px; padding:0 14px 10px; flex-wrap:wrap; }
.jd6-metric { font-size:12px; }
.jd6-metric b { font-size:14px; }

.jd6-client-note { margin:0 14px 10px; background:#FBE9E7; border-left:3px solid var(--red); padding:8px 10px; font-size:12px; border-radius:2px; }
.jd6-client-note .label { font-weight:700; color:var(--red); margin-bottom:3px; }

.jd6-card-actions { display:flex; gap:8px; padding:10px 14px; border-top:1px solid #F0F2F4; flex-wrap:wrap; }
.jd6-card-actions button { font-size:12px; font-weight:600; padding:6px 12px; border-radius:3px; cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--navy); }
.jd6-card-actions button.primary { background:var(--navy); color:#fff; border-color:var(--navy); }
.jd6-card-actions button.approve { background:var(--green); color:#fff; border-color:var(--green); }
.jd6-card-actions button.revise { background:#fff; color:var(--red); border-color:var(--red); }
.jd6-card-actions button:hover { opacity:0.85; }
.jd6-card-actions button:disabled { opacity:0.5; cursor:default; }

/* modals */
.jd6-overlay { position:fixed; inset:0; background:rgba(36,51,63,0.4); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; }
.jd6-modal { background:#fff; border-radius:5px; width:100%; max-width:480px; padding:20px; max-height:88vh; overflow-y:auto; }
.jd6-modal.wide { max-width:640px; }
.jd6-modal h3 { margin:0 0 4px; font-size:15.5px; }
.jd6-modal-sub { font-size:11.5px; color:#8A96A0; margin:0 0 14px; }
.jd6-field { margin-bottom:11px; }
.jd6-field label { display:block; font-size:11.5px; font-weight:600; margin-bottom:4px; }
.jd6-field-hint { font-size:10.5px; color:#8A96A0; margin-bottom:6px; }
.jd6-field input[type=text], .jd6-field input[type=date], .jd6-field input[type=number], .jd6-field input[type=email], .jd6-field textarea {
  width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:3px; font-size:12.5px; font-family:'Inter',sans-serif; background:#FAFBFC;
}
.jd6-field textarea { resize:vertical; min-height:90px; }
.jd6-two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.jd6-check-row { display:flex; gap:12px; flex-wrap:wrap; }
.jd6-check-item { display:flex; align-items:center; gap:5px; font-size:12px; }
.jd6-modal-actions { display:flex; gap:8px; margin-top:16px; justify-content:flex-end; }
.jd6-cancel-btn { background:#fff; border:1px solid var(--line); padding:7px 14px; border-radius:3px; cursor:pointer; font-size:12.5px; font-weight:600; color:#7A8894; }
.jd6-submit-btn { background:var(--navy); border:none; color:#fff; padding:7px 16px; border-radius:3px; cursor:pointer; font-size:12.5px; font-weight:700; }
.jd6-submit-btn:hover { background:var(--navy-dark); }
.jd6-submit-btn:disabled { opacity:0.6; cursor:default; }
.jd6-log-platform-block { border:1px solid var(--line); border-radius:4px; padding:9px 10px; margin-bottom:9px; }
.jd6-log-platform-name { font-size:12px; font-weight:700; margin-bottom:7px; }
.jd6-log-inputs { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.jd6-log-inputs label { font-size:10.5px; color:#8A96A0; display:block; margin-bottom:2px; }
.jd6-record-table { width:100%; border-collapse:collapse; font-size:12px; margin-top:6px; }
.jd6-record-table th { text-align:left; background:#EEF1F3; color:#5C6975; padding:6px 10px; font-weight:600; }
.jd6-record-table td { padding:6px 10px; border-bottom:1px solid #F1F3F4; }
.jd6-chart-wrap6 { height:220px; margin-top:10px; }

/* image manager */
.jd6-images-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.jd6-image-item { position:relative; width:84px; height:63px; }
.jd6-image-item img { width:100%; height:100%; object-fit:cover; border-radius:3px; border:1px solid var(--line); }
.jd6-image-item.staged img { opacity: 0.6; }
.jd6-image-remove-x { position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:var(--red); color:#fff; border:none; font-size:11px; line-height:18px; text-align:center; cursor:pointer; padding:0; }
.jd6-image-add-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.jd6-image-add-row input[type=file] { font-size:11.5px; }
.jd6-image-url-row { display:flex; gap:6px; margin-bottom:4px; }
.jd6-image-url-row input { flex:1; }
.jd6-image-url-row button { font-size:11.5px; font-weight:600; padding:7px 12px; border-radius:3px; border:1px solid var(--line); background:#fff; color:var(--navy); cursor:pointer; white-space:nowrap; }
.jd6-image-url-row button:hover { border-color:var(--navy); }
.jd6-image-error { font-size:11px; color:var(--red); min-height: 14px; margin-top:2px; white-space: pre-line; }
.jd6-image-loading { font-size:11px; color:#8A96A0; }

/* lightbox */
.jd6-lightbox-overlay { position:fixed; inset:0; background:rgba(20,26,32,0.88); display:flex; align-items:center; justify-content:center; z-index:60; padding:24px; }
.jd6-lightbox-inner { position:relative; max-width:90vw; max-height:85vh; display:flex; flex-direction:column; align-items:center; }
.jd6-lightbox-img { max-width:90vw; max-height:75vh; border-radius:4px; }
.jd6-lightbox-close { position:absolute; top:-34px; right:0; background:none; border:none; color:#fff; font-size:26px; cursor:pointer; line-height:1; }
.jd6-lightbox-nav { display:flex; gap:20px; margin-top:12px; }
.jd6-lightbox-nav button { background:rgba(255,255,255,0.12); border:none; color:#fff; padding:6px 16px; border-radius:20px; cursor:pointer; font-size:13px; }
.jd6-lightbox-nav button:hover { background:rgba(255,255,255,0.22); }
.jd6-lightbox-count { color:#fff; font-size:11.5px; margin-top:8px; opacity:0.75; }