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

:root{
  --brand: #2C6B82;
  --brand-dark: #16324F;
  --text-primary: #1A2233;
  --text-secondary: #6B7280;
  --border: #DEE2E9;
  --bg-panel: #F5F7FA;
  --navy-900: #0E2530;
  --navy-800: #163C48;
  --navy-700: #1F5266;
  --navy-600: #2C6B82;
  --success: #2E8B6F;
  --danger: #C4453D;
  --radius: 10px;
}

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

html,body{
  width:100%;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--text-primary);
  background:#EEF1F5;
}

a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ============================================================
   Two-column auth screens (login, password, forgot/reset, invite)
   ============================================================ */

.screen{
  display:flex;
  width:100%;
  min-height:100vh;
}

.left{
  flex:1 1 50%;
  background:
    linear-gradient(var(--bg-panel), var(--bg-panel)),
    repeating-linear-gradient(0deg, rgba(44,107,130,0.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(44,107,130,0.05) 0 1px, transparent 1px 40px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:32px;
  min-height:100vh;
}

.left-content{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 0;
}

.form-wrap{
  width:100%;
  max-width:360px;
  display:flex;
  flex-direction:column;
  gap:32px;
}

.header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}

.logo{ width:40px; height:40px; display:block; }

.brand-word{
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brand);
}

.header h1{
  font-size:24px;
  line-height:32px;
  font-weight:600;
  color:var(--brand-dark);
  margin-top:6px;
}

.header p{
  font-size:14px;
  line-height:20px;
  color:var(--text-secondary);
}

.form{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field label{
  font-size:14px;
  font-weight:500;
  color:var(--text-primary);
}

.field input{
  width:100%;
  height:44px;
  padding:0 16px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:14px;
  font-family:inherit;
  color:var(--text-primary);
  background:#fff;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder{ color:#9AA3AF; }
.field input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(44,107,130,0.14);
}

.field .input-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.field .input-wrap input{
  padding:0 44px 0 16px;
}
/* the reset-password modal's email field has no trailing icon button */
.modal .field .input-wrap input{
  padding:0 16px;
}

.toggle-visibility{
  position:absolute;
  right:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9AA3AF;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
}
.toggle-visibility svg{ width:18px; height:18px; }

/* Default look for any plain <button>/submit input that hasn't opted into
   a more specific class (.toggle-visibility, .modal-close, .small, ...) --
   class selectors below always win on specificity regardless of source
   order, so this is a safe blanket default rather than something to
   remember to apply everywhere by hand. */
button, input[type=submit]{
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  color:#fff;
  background:var(--brand-dark);
  border:none;
  border-radius:8px;
  height:40px;
  padding:0 20px;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(14,37,48,0.08);
  transition:background .15s ease, box-shadow .15s ease, transform .05s ease;
}
button:hover, input[type=submit]:hover{ background:#0E2530; box-shadow:0 2px 6px rgba(14,37,48,0.16); }
button:active, input[type=submit]:active{ transform:translateY(1px); box-shadow:none; }
button:focus-visible, input[type=submit]:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
button:disabled, input[type=submit]:disabled{ opacity:.6; cursor:default; box-shadow:none; }

.btn{
  height:44px;
  padding:0 24px;
  border:none;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  white-space:nowrap;
}

.btn-primary{
  background:var(--brand-dark);
  color:#fff;
  transition:background .15s ease, opacity .15s ease;
}
.btn-primary:hover{ background:#0E2530; }
.btn-primary:disabled{ opacity:0.65; cursor:default; }

.forgot-link{
  text-align:center;
  font-size:14px;
  color:var(--brand);
  font-weight:500;
}
.forgot-link:hover{ text-decoration:underline; }

.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  color:var(--text-secondary);
  padding-top:24px;
  border-top:1px solid var(--border);
}
.footer .contact{ display:flex; align-items:center; gap:8px; }

.right{ flex:1 1 50%; overflow:hidden; min-height:100vh; }
.right svg{ display:block; width:100%; height:100%; }

@media (max-width: 900px){
  .screen{ flex-direction:column; }
  .right{ display:none; }
  .left{ min-height:100vh; }
}

.requirements{ display:flex; flex-direction:column; gap:10px; }
.requirements li{
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--text-secondary);
}
.requirements li svg{ width:16px; height:16px; flex-shrink:0; color:#C3CAD6; }
.requirements li.met{ color:var(--success); }
.requirements li.met svg{ color:var(--success); }

.error-box{
  background:#FBE1DE;
  border:1px solid #F3BEB8;
  color:#9B342D;
  padding:12px 16px;
  border-radius:8px;
  font-size:13px;
}

.success-banner{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:linear-gradient(90deg, #DCF3E7 0%, #EAF6EF 100%);
  border:1px solid #BEE6D0;
  border-radius:10px;
  padding:16px 18px;
}
.success-banner .icon{
  width:22px; height:22px; border-radius:50%;
  background:var(--success);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:2px;
}
.success-banner .icon svg{ width:12px; height:12px; color:#fff; }
.success-banner strong{ display:block; font-size:14px; font-weight:600; color:#1E6B4F; }
.success-banner p{ font-size:13px; color:#3E7A63; margin-top:2px; }

/* Reset-password modal */
.overlay{
  position:fixed; inset:0;
  background:rgba(14,37,48,0.55);
  backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  z-index:10; padding:24px;
}
.modal{
  width:100%; max-width:420px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 40px 80px -20px rgba(10,15,30,0.5);
  padding:28px;
  display:flex; flex-direction:column; gap:20px;
}
.modal-header{ display:flex; align-items:flex-start; justify-content:space-between; }
.modal-header h2{ font-size:20px; font-weight:600; color:var(--text-primary); }
.modal-close{ background:none; border:none; cursor:pointer; color:#6B7280; padding:2px; line-height:0; }
.modal-close svg{ width:20px; height:20px; }
.modal-desc{ font-size:14px; line-height:21px; color:var(--text-secondary); margin-top:-12px; }

/* Single-column confirmation / error screens */
.screen-single{
  position:relative;
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:32px;
  background:
    linear-gradient(var(--bg-panel), var(--bg-panel)),
    repeating-linear-gradient(0deg, rgba(44,107,130,0.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(44,107,130,0.05) 0 1px, transparent 1px 40px);
}
.back-btn{
  width:36px; height:36px; border-radius:50%;
  background:#fff; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-primary);
  box-shadow:0 1px 2px rgba(16,24,40,0.05);
}
.back-btn svg{ width:18px; height:18px; }
.content{ flex:1; display:flex; align-items:center; justify-content:center; }
.card-center{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  max-width:360px; text-align:center;
}
.card-center h1{ font-size:20px; line-height:28px; font-weight:600; color:var(--text-primary); }
.card-center p{ font-size:14px; line-height:21px; color:var(--text-secondary); margin-top:-8px; }
.icon-circle{
  width:56px; height:56px; border-radius:50%;
  background:#E7EAF0; display:flex; align-items:center; justify-content:center;
}
.icon-circle svg{ width:24px; height:24px; color:#6B7280; }
.icon-circle.success{
  background:linear-gradient(160deg, #4FBF9C, #2E8B6F);
  box-shadow:0 8px 20px -6px rgba(46,139,111,0.45);
}
.icon-circle.success svg{ color:#fff; }
.icon-circle.danger{
  background:linear-gradient(160deg, #E17A73, #C4453D);
  box-shadow:0 8px 20px -6px rgba(196,69,61,0.45);
}
.icon-circle.danger svg{ color:#fff; }
.resend-btn{
  height:40px; padding:0 20px; border-radius:20px;
  background:#EDEFF3; border:1px solid var(--border);
  color:#9AA3AF; font-size:14px; font-weight:500; font-family:inherit;
  cursor:not-allowed;
}
.resend-btn.active{ background:#fff; color:var(--brand); cursor:pointer; }

/* ============================================================
   Dashboard chrome: sidebar + page header (sites / site / users pages)
   ============================================================ */

.app-shell{ display:flex; align-items:flex-start; min-height:100vh; }

.sidebar{
  width:248px;
  flex-shrink:0;
  min-height:100vh;
  background:var(--brand-dark);
  color:#fff;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  align-self:flex-start;
  z-index:30;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:22px 22px 18px; }
.sidebar-brand .logo{ width:30px; height:30px; flex-shrink:0; }
.sidebar-brand .brand-text{ line-height:1.15; }
.sidebar-brand .brand-text .name{ font-size:15px; font-weight:700; color:#fff; display:block; }
.sidebar-brand .brand-text .tagline{ font-size:11px; color:rgba(255,255,255,0.55); }

.sidebar-nav{ flex:1; padding:6px 12px; display:flex; flex-direction:column; gap:3px; overflow-y:auto; }
.sidebar-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  color:rgba(255,255,255,0.7);
  transition:background .15s ease, color .15s ease;
}
.sidebar-link svg{ width:18px; height:18px; flex-shrink:0; }
.sidebar-link:hover{ background:rgba(255,255,255,0.08); color:#fff; text-decoration:none; }
.sidebar-link.active{ background:var(--brand); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.18); }

.sidebar-footer{ padding:16px 22px; border-top:1px solid rgba(255,255,255,0.12); font-size:11px; color:rgba(255,255,255,0.4); }

.sidebar-backdrop{ display:none; }

.main-content{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:100vh; }

.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 28px;
  background:#fff;
  box-shadow:0 1px 3px rgba(14,37,48,0.06), 0 1px 0 rgba(14,37,48,0.04);
  position:sticky;
  top:0;
  z-index:20;
}
.page-header-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.page-header h1{ font-size:18px; font-weight:700; color:var(--brand-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sidebar-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  background:none;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text-primary);
  flex-shrink:0;
  box-shadow:none;
}
.sidebar-toggle:hover{ background:var(--bg-panel); }
.sidebar-toggle svg{ width:18px; height:18px; }

@media (max-width: 960px){
  .sidebar{
    position:fixed;
    left:0; top:0; bottom:0;
    height:100vh;
    transform:translateX(-100%);
    transition:transform .2s ease;
  }
  .sidebar.open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,0.35); }
  .sidebar-toggle{ display:inline-flex; }
  .sidebar-backdrop{
    display:none;
    position:fixed; inset:0;
    background:rgba(14,37,48,0.5);
    z-index:25;
  }
  .sidebar-backdrop.open{ display:block; }
  .page-header{ padding:14px 16px; }
  .page-header h1{ font-size:16px; }
}

/* ---- User panel: avatar + dropdown ---- */
.user-panel{ position:relative; }
.user-panel-trigger{
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:1px solid transparent;
  border-radius:10px;
  padding:4px 10px 4px 4px;
  cursor:pointer;
  font-family:inherit;
  color:var(--text-primary);
  transition:background .15s ease, border-color .15s ease;
}
.user-panel-trigger:hover{ background:var(--bg-panel); border-color:var(--border); }
.user-panel-trigger svg{ color:var(--text-secondary); }
.avatar{
  width:30px; height:30px;
  border-radius:50%;
  background:var(--brand-dark);
  color:#fff;
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 1px 3px rgba(14,37,48,0.25);
}
.user-panel-name{ font-size:13px; font-weight:600; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.user-panel-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:220px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 12px 32px -8px rgba(14,37,48,0.25);
  overflow:hidden;
  z-index:30;
}
.user-panel-dropdown.open{ display:block; }
.user-panel-info{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.user-panel-signout{
  display:block;
  padding:12px 16px;
  font-size:13px;
  font-weight:600;
  color:var(--danger);
}
.user-panel-signout:hover{ background:#FBE1DE; text-decoration:none; }

@media (max-width: 560px){
  .user-panel-name{ display:none; }
}

.container{ max-width:1400px; margin:0 auto; padding:32px 24px 64px; width:100%; }

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 24px;
  margin-bottom:22px;
  box-shadow:0 1px 2px rgba(14,37,48,0.04), 0 6px 16px -8px rgba(14,37,48,0.08);
}

/* Lets a wide table scroll horizontally inside its own card instead of
   forcing the whole page (and the sidebar layout around it) wider than
   the viewport. */
.table-scroll{ overflow-x:auto; }
.table-scroll table{ min-width:520px; }

input[type=text], input[type=email], input[type=password], input[type=date], select, textarea{
  width:100%;
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:14px;
  margin-bottom:14px;
  font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=date]:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(44,107,130,0.14);
}

button.small, a.btn-small{
  display:inline-flex;
  align-items:center;
  height:auto;
  background:var(--brand-dark);
  color:#fff;
  border:none;
  border-radius:6px;
  padding:7px 14px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  box-shadow:0 1px 2px rgba(14,37,48,0.08);
  transition:background .15s ease, box-shadow .15s ease, transform .05s ease;
}
button.small:hover, a.btn-small:hover{ background:#0E2530; box-shadow:0 2px 6px rgba(14,37,48,0.16); text-decoration:none; }
button.small:active, a.btn-small:active{ transform:translateY(1px); box-shadow:none; }
button.small:disabled{ opacity:.6; cursor:default; box-shadow:none; }

.btn-danger{ background:var(--danger) !important; }
.btn-danger:hover{ background:#9B342D !important; }
.btn-muted{ background:#8B96A8 !important; }
.btn-muted:hover{ background:#6B7785 !important; }

.grid-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:14px;
  margin-bottom:20px;
}
.tile{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 1px 2px rgba(14,37,48,0.04), 0 6px 16px -8px rgba(14,37,48,0.08);
  transition:box-shadow .15s ease, transform .15s ease;
}
.tile:hover{ box-shadow:0 4px 8px rgba(14,37,48,0.06), 0 12px 24px -10px rgba(14,37,48,0.14); transform:translateY(-1px); }
.tile .label{ font-size:12px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.04em; }
.tile .value{ font-size:28px; font-weight:700; margin-top:6px; color:var(--text-primary); letter-spacing:-.01em; }

.section-title{ font-size:15px; font-weight:600; margin:28px 0 12px; color:var(--brand-dark); }
.breadcrumb{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); margin-bottom:2px; }

table{ width:100%; border-collapse:collapse; font-size:13px; }
th, td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); }
th{
  color:var(--text-secondary);
  font-weight:700;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-bottom:2px solid var(--border);
}
tbody tr:nth-child(even) td{ background:#FAFBFC; }
tbody tr:hover td{ background:#EEF3F7; }
tbody tr:last-child td{ border-bottom:none; }
td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; }

.sites-list{ list-style:none; padding:0; margin:0; }
.sites-list li{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--border);
}
.sites-list li:last-child{ border-bottom:none; }
.sites-list .meta{ font-size:12px; color:var(--text-secondary); }

.range-form{ display:flex; gap:10px; align-items:end; margin-bottom:20px; flex-wrap:wrap; }
.range-form > div{ margin-bottom:0; }
.range-form label{ display:block; margin-bottom:4px; font-size:13px; color:var(--text-secondary); }
.range-form input, .range-form select{ margin-bottom:0; }

.chart-wrap{ position:relative; height:280px; }

/* ============================================================
   Insight cards: "what's ranking / what's working" callouts (site.php)
   ============================================================ */
.insight-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  margin-bottom:20px;
}
.insight-card{
  background:#fff;
  border:1px solid var(--border);
  border-left:4px solid var(--brand);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:0 1px 2px rgba(14,37,48,0.04), 0 6px 16px -8px rgba(14,37,48,0.08);
  min-width:0;
}
.insight-card.insight-opportunity{ border-left-color:#C99A2E; }
.insight-card.insight-good{ border-left-color:var(--success); }
.insight-card.insight-bad{ border-left-color:var(--danger); }
.insight-label{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-secondary); margin-bottom:6px;
}
.insight-value{ font-size:15px; font-weight:700; color:var(--text-primary); line-height:1.35; }
.insight-sub{ font-size:12px; color:var(--text-secondary); margin-top:4px; }

.truncate{
  max-width:420px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; display:inline-block; vertical-align:bottom;
}

.badge{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:20px;
  text-transform:uppercase;
  letter-spacing:.03em;
  border:1px solid rgba(11,11,11,0.06);
}
.badge-admin{ background:#E8EEF7; color:var(--brand-dark); }
.badge-member{ background:#EEF1F5; color:var(--text-secondary); }
.badge-client{ background:#EDE7F6; color:#5B3F9E; }
.badge-active{ background:#DCF3E7; color:#1E6B4F; }
.badge-invited{ background:#FCEFDA; color:#8A5A17; }
.badge-disabled{ background:#F4E4E3; color:#9B342D; }

.spinner{
  width:16px; height:16px;
  border:2px solid rgba(255,255,255,0.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  display:none;
}
.btn-primary.loading .spinner{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============================================================
   Stat tiles: icon + delta chip (site.php)
   ============================================================ */
.tile-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.tile-icon{
  width:30px; height:30px;
  border-radius:8px;
  background:#EEF3F7;
  color:var(--brand-dark);
  display:flex; align-items:center; justify-content:center;
}
.tile-icon svg{ width:16px; height:16px; }

.delta-chip{
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:20px;
  font-variant-numeric:tabular-nums;
}
.delta-chip.delta-good{ background:#DCF3E7; color:#1E6B4F; }
.delta-chip.delta-bad{ background:#FBE1DE; color:#9B342D; }
.delta-chip.delta-flat{ background:#EEF1F5; color:var(--text-secondary); }

/* ============================================================
   Mini trend charts: one metric, one axis, per card (site.php)
   ============================================================ */
.mini-chart-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
  margin-bottom:8px;
}
.mini-chart-card{ margin-bottom:0; padding:16px; }
.mini-chart-title{
  font-size:13px;
  font-weight:600;
  color:var(--text-primary);
  margin-bottom:8px;
}
.mini-chart-title span{
  font-size:11px;
  font-weight:600;
  color:var(--text-secondary);
  margin-left:6px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.chart-wrap.small{ height:140px; }

/* ============================================================
   AI reports (site.php list + generate form, report.php view)
   ============================================================ */
.report-generate-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  background:linear-gradient(135deg, #F3F7FA 0%, #EAF1F5 100%);
  border-color:#DCE6EC;
}
.report-generate-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.report-list{ list-style:none; padding:0; margin:0 0 20px; }
.report-list li{ border-bottom:1px solid var(--border); }
.report-list li:last-child{ border-bottom:none; }
.report-list a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 4px;
  color:var(--text-primary);
  font-size:13px;
}
.report-list a:hover{ text-decoration:none; background:#FAFBFC; }
.report-list .report-range{ font-weight:500; }
.report-list .report-date{ margin-left:auto; color:var(--text-secondary); font-size:12px; }

.report-card{ max-width:760px; margin-left:auto; margin-right:auto; }
.report-meta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--text-secondary);
  padding-bottom:16px;
  margin-bottom:16px;
  border-bottom:1px solid var(--border);
}
.report-body h2{ font-size:20px; color:var(--brand-dark); margin:0 0 14px; }
.report-body h3{ font-size:15px; color:var(--brand-dark); margin:22px 0 8px; }
.report-body h4{ font-size:14px; color:var(--text-primary); margin:16px 0 6px; }
.report-body p{ font-size:14px; line-height:1.6; color:var(--text-primary); margin:0 0 12px; }
.report-body ul, .report-body ol{ margin:0 0 14px; padding-left:22px; }
.report-body li{ font-size:14px; line-height:1.6; margin-bottom:6px; }

.comment-list{ list-style:none; padding:0; margin:0; }
.comment-list li{ padding:14px 0; border-bottom:1px solid var(--border); }
.comment-list li:last-child{ border-bottom:none; }
.comment-head{ display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:4px; }
.comment-head strong{ color:var(--text-primary); }
.comment-date{ margin-left:auto; color:var(--text-secondary); font-size:12px; }
.comment-body{ font-size:14px; line-height:1.55; color:var(--text-primary); margin:0; }

/* ============================================================
   Dev report timeline (dev-report.php)
   ============================================================ */
.timeline{ position:relative; padding-left:26px; }
.timeline::before{
  content:'';
  position:absolute;
  left:8px; top:8px; bottom:8px;
  width:2px;
  background:var(--border);
}
.timeline-item{ position:relative; margin-bottom:18px; }
.timeline-item:last-child{ margin-bottom:0; }
.timeline-dot{
  position:absolute;
  left:-26px; top:14px;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--brand-dark);
  border:3px solid #EEF1F5;
}
.timeline-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:0 1px 2px rgba(14,37,48,0.04), 0 6px 16px -8px rgba(14,37,48,0.08);
}
.timeline-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.timeline-date{ margin-left:auto; font-size:12px; color:var(--text-secondary); }
.timeline-desc{ font-size:14px; line-height:1.55; color:var(--text-primary); margin:8px 0 0; }
.timeline-actions{ margin-top:12px; }

.like-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:auto;
  background:#EEF1F5;
  color:var(--text-secondary);
  border:none;
  border-radius:20px;
  padding:6px 14px;
  font-size:13px;
  font-weight:700;
  box-shadow:none;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.like-btn svg{ width:16px; height:16px; }
.like-btn:hover{ background:#E2E7ED; }
.like-btn:active{ transform:scale(0.95); }
.like-btn.liked{ background:#FBE1DE; color:var(--danger); }

.timeline-comment-form{ display:flex; gap:8px; margin-top:12px; }
.timeline-comment-form input[type=text]{ flex:1; margin-bottom:0; }
.timeline-comment-form button{ flex-shrink:0; height:40px; }

/* ============================================================
   Dev task "?" info toggle -- dev comment + AI help (dev-tasks.php)
   ============================================================ */
.info-toggle{
  width:20px; height:20px;
  padding:0;
  border-radius:50%;
  background:#EEF1F5;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:700;
  font-family:inherit;
  line-height:1;
  box-shadow:none;
  flex-shrink:0;
}
.info-toggle:hover{ background:var(--brand-dark); color:#fff; }

.task-info-panel{
  display:none;
  margin-top:12px;
  padding:12px 14px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:8px;
  gap:14px;
}
.task-info-panel.open{ display:flex; flex-direction:column; }
.task-info-block:not(:last-child){ margin-bottom:12px; }
.task-info-label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--brand-dark);
  margin-bottom:4px;
}
.task-info-body{ font-size:13px; line-height:1.55; color:var(--text-primary); margin:0; }

@media print{
  .sidebar, .page-header, .range-form, .report-generate-card, .report-list, .no-print, a[href^="site.php"]{ display:none !important; }
  body{ background:#fff; }
  .card{ border:none; box-shadow:none; padding:0; }
  .container{ max-width:none; padding:0; }
  .main-content{ min-height:0; }
}