/* ================================================================
   KF AGENCY — Design System v2
   Brand: gradient A mark (pink→purple→blue)
   Font: Cairo (Arabic + Latin)  
   Modes: Light / Dark
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --kf-grad-start: #d946ef;
  --kf-grad-mid:   #8b2cf5;
  --kf-grad-end:   #3b82f6;
  --kf-gradient:   linear-gradient(135deg,#d946ef,#8b2cf5,#3b82f6);
  --kf-gradient-h: linear-gradient(90deg,#d946ef,#8b2cf5,#3b82f6);
  --kf-purple: #8b2cf5;
  --kf-blue:   #3b82f6;
  --kf-pink:   #d946ef;
  --kf-success:#22c55e;
  --kf-warning:#f59e0b;
  --kf-danger: #ef4444;
  --kf-info:   #06b6d4;
  --sidebar-w:     260px;
  --sidebar-mini:  64px;
  --bg-page:   #f1f3f8;
  --bg-card:   #ffffff;
  --bg-input:  #ffffff;
  --bg-hover:  #f8fafc;
  --tx-primary:#0f172a;
  --tx-second: #475569;
  --tx-muted:  #94a3b8;
  --tx-inv:    #ffffff;
  --bd:        #e2e8f0;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.07);
  --shadow-md: 0 4px 18px rgba(0,0,0,.09);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.13);
  --shadow-glow:0 0 0 3px rgba(139,44,245,.18);
  --r-sm:6px;--r-md:12px;--r-lg:18px;--r-xl:26px;--r-full:999px;
  --t:0.18s ease;
}

[data-theme="dark"] {
  --bg-page:  #070c16;
  --bg-card:  #0f172a;
  --bg-input: #1e293b;
  --bg-hover: #1a2540;
  --tx-primary:#f1f5f9;
  --tx-second: #94a3b8;
  --tx-muted:  #64748b;
  --bd:        #1e293b;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body {
  margin:0;
  font-family:'Cairo',Arial,sans-serif;
  font-size:15px;
  line-height:1.6;
  background:var(--bg-page);
  color:var(--tx-primary);
  transition:background .25s,color .25s;
}

/* ── Layout ────────────────────────────────────────────────── */
.main-container{display:flex;min-height:100vh;}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
  background:#0a0f1e;
  color:#fff;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition:width var(--t),min-width var(--t);
  overflow:hidden;
  position:sticky;
  top:0;height:100vh;
  z-index:100;
  flex-shrink:0;
  border-right:1px solid rgba(255,255,255,.04);
}

.sidebar.collapsed{width:var(--sidebar-mini);min-width:var(--sidebar-mini);}

.sidebar-inner{
  display:flex;flex-direction:column;height:100%;
  overflow-y:auto;overflow-x:hidden;
  padding-bottom:20px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent;
}

/* Brand */
.sidebar-brand{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
  min-height:62px;flex-shrink:0;
}

.sidebar-logo{height:34px;width:auto;display:block;object-fit:contain;transition:all var(--t);}
.sidebar.collapsed .sidebar-logo{height:28px;}

.sidebar-toggle{
  background:rgba(255,255,255,.07);border:none;color:#fff;
  width:30px;height:30px;border-radius:var(--r-sm);cursor:pointer;
  font-size:13px;display:flex;align-items:center;justify-content:center;
  transition:background var(--t);flex-shrink:0;
}
.sidebar-toggle:hover{background:rgba(255,255,255,.13);}
.sidebar.collapsed .sidebar-brand{justify-content:center;padding:14px 8px;}

/* User */
.sidebar-user{
  margin:10px 10px 6px;padding:10px 12px;
  border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);
  background:rgba(255,255,255,.03);
  display:flex;align-items:center;gap:10px;overflow:hidden;
}
.sidebar.collapsed .sidebar-user{margin:8px 5px;padding:8px;justify-content:center;}
.sidebar.collapsed .sidebar-user-info{display:none;}

.sidebar-user-avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--kf-gradient);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:14px;color:#fff;flex-shrink:0;
}

.sidebar-user-info{flex:1;min-width:0;}
.sidebar-hello{margin:0;font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-role{margin:1px 0 0;font-size:11px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Profile incomplete */
.sidebar-profile-alert{
  display:block;margin:4px 10px;padding:7px 12px;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.25);
  border-radius:var(--r-md);color:#f59e0b;font-size:11.5px;font-weight:700;
  text-decoration:none;text-align:center;
}
.sidebar.collapsed .sidebar-profile-alert{display:none;}

/* Theme toggle */
.sidebar-theme{
  display:flex;align-items:center;justify-content:space-between;
  margin:4px 10px;padding:7px 12px;
  border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);
  background:rgba(255,255,255,.03);
}
.sidebar.collapsed .sidebar-theme{justify-content:center;}
.sidebar.collapsed .theme-lbl{display:none;}
.theme-lbl{font-size:11px;color:#475569;font-weight:700;}

.theme-btn{
  background:rgba(255,255,255,.1);border:none;border-radius:var(--r-full);
  width:34px;height:18px;cursor:pointer;position:relative;transition:background var(--t);
}
.theme-btn::after{
  content:'☀️';position:absolute;top:1px;left:1px;
  font-size:14px;line-height:1;transition:transform var(--t);
}
[data-theme="dark"] .theme-btn{background:rgba(139,44,245,.4);}
[data-theme="dark"] .theme-btn::after{content:'🌙';transform:translateX(16px);}

/* Client filter */
.sidebar-filter-card{margin:4px 10px 6px;overflow:hidden;}
.sidebar.collapsed .sidebar-filter-card{display:none;}

.sidebar-filter-title{
  display:block;font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:#475569;padding:8px 10px 3px;
}
.sidebar-filter-toggle-btn{
  width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-md);color:#94a3b8;font:600 12px 'Cairo',sans-serif;
  padding:7px 10px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;
}
.sidebar-client-selector{display:none;flex-direction:column;padding:6px 0;}
.sidebar-client-selector.open{display:flex;}

.sidebar-client-search{
  padding:6px 10px;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);
  background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:12px;
  margin-bottom:4px;outline:none;
}
.sidebar-client-list{max-height:180px;overflow-y:auto;}

.sidebar-client-option{
  display:flex;align-items:center;gap:7px;padding:5px 8px;
  border-radius:var(--r-sm);cursor:pointer;font-size:12px;color:#94a3b8;
  transition:background var(--t);
}
.sidebar-client-option:hover{background:rgba(255,255,255,.06);}
.sidebar-client-option input{accent-color:var(--kf-purple);}
.sidebar-client-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.sidebar-client-status-dot{width:6px;height:6px;border-radius:50%;background:#475569;flex-shrink:0;}
.sidebar-client-status-dot.status-active{background:#22c55e;}
.sidebar-client-status-dot.status-prospect{background:#f59e0b;}
.sidebar-client-status-dot.status-inactive{background:#ef4444;}
.sidebar-client-status-dot.status-churned{background:#94a3b8;}

.sidebar-filter-actions{display:flex;gap:5px;padding:4px 0 0;}
.sidebar-filter-actions button{
  flex:1;padding:5px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:#94a3b8;
  font:700 11px 'Cairo',sans-serif;cursor:pointer;transition:background var(--t);
}
.sidebar-filter-actions button:hover{background:rgba(255,255,255,.1);}
.sidebar-filter-actions button:last-child{
  background:rgba(139,44,245,.25);border-color:rgba(139,44,245,.4);color:#c4b5fd;
}

/* Nav */
.sidebar-nav{flex:1;padding:4px 0;}
.sidebar-nav ul{list-style:none;padding:0;margin:0;}
.sidebar-nav ul li{margin:1px 0;}

.sidebar-section-label{
  display:block;font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;color:#334155;padding:12px 16px 3px;
  white-space:nowrap;overflow:hidden;
}
.sidebar.collapsed .sidebar-section-label{text-align:center;padding:10px 4px 3px;font-size:8px;letter-spacing:0;}

.sidebar-nav ul li a,
.sidebar-nav ul li button.nav-btn {
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;margin:0 8px;
  border-radius:var(--r-md);
  color:#64748b;text-decoration:none;
  font:600 13px/1.4 'Cairo',sans-serif;
  transition:all var(--t);white-space:nowrap;overflow:hidden;
  cursor:pointer;background:none;border:none;
  width:calc(100% - 16px);
}

.sidebar.collapsed .sidebar-nav ul li a,
.sidebar.collapsed .sidebar-nav ul li button.nav-btn {
  justify-content:center;padding:9px;margin:0 4px;width:calc(100% - 8px);
}

.sidebar-nav ul li a:hover,
.sidebar-nav ul li button.nav-btn:hover{background:rgba(255,255,255,.05);color:#cbd5e1;}

.sidebar-nav ul li a.active{
  background:linear-gradient(135deg,rgba(217,70,239,.2),rgba(139,44,245,.2),rgba(59,130,246,.15));
  color:#fff;border:1px solid rgba(139,44,245,.28);
}

.nav-icon{font-size:15px;flex-shrink:0;width:20px;text-align:center;}
.nav-label{flex:1;overflow:hidden;text-overflow:ellipsis;transition:opacity var(--t);}
.sidebar.collapsed .nav-label{opacity:0;width:0;overflow:hidden;}

.nav-badge{
  background:var(--kf-purple);color:#fff;border-radius:var(--r-full);
  padding:2px 7px;font-size:10px;font-weight:800;margin-left:auto;flex-shrink:0;
}
.sidebar.collapsed .nav-badge{display:none;}

/* Nested */
.sidebar-nav ul li ul{padding-left:0;}
.sidebar-nav ul li ul li a{margin:0 8px 0 20px;width:calc(100% - 28px);font-size:12.5px;padding:7px 10px;}
.sidebar.collapsed ul li ul li a{margin:0 4px;width:calc(100% - 8px);}

.nav-logout a{color:#ef4444 !important;}
.nav-logout a:hover{background:rgba(239,68,68,.1) !important;color:#fca5a5 !important;}

/* Tooltip on hover when collapsed */
.sidebar.collapsed .sidebar-nav ul li{position:relative;}
.sidebar.collapsed .sidebar-nav ul li a[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  background:#0f172a;color:#fff;padding:5px 10px;border-radius:var(--r-sm);
  font-size:12px;font-weight:600;white-space:nowrap;z-index:200;
  box-shadow:var(--shadow-md);
  pointer-events:none;
}

/* ── Content area ──────────────────────────────────────────── */
.content{flex:1;min-width:0;padding:24px 28px 48px;transition:all var(--t);}

/* ── Page Shell ────────────────────────────────────────────── */
.page-shell{max-width:1440px;display:flex;flex-direction:column;gap:18px;}
.page-shell.narrow{max-width:800px;}

/* ── Glass card ────────────────────────────────────────────── */
.glass-card{
  background:var(--bg-card);border-radius:var(--r-lg);
  border:1px solid var(--bd);box-shadow:var(--shadow-sm);
  transition:background .25s,border-color .25s,box-shadow var(--t);
}
.glass-card:hover{box-shadow:var(--shadow-md);}
.form-card{padding:24px 28px;}
.prose-card{padding:24px 28px;}
.prose-card h2,.prose-card h3{margin-top:0;color:var(--tx-primary);}
.prose-card p{color:var(--tx-second);}

/* ── Hero ──────────────────────────────────────────────────── */
.hero{
  padding:26px 30px;background:var(--bg-card);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  justify-content:space-between;border-radius:var(--r-lg);
  border:1px solid var(--bd);box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:-40%;right:-5%;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,70,239,.08),transparent 70%);
  pointer-events:none;
}
.hero-main{flex:1;min-width:0;}
.eyebrow{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  background:var(--kf-gradient-h);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:5px;display:block;
}
.hero h1{margin:0 0 6px;font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:900;color:var(--tx-primary);line-height:1.2;}
.hero-copy{margin:0;color:var(--tx-second);font-size:.9rem;}
.hero-side{display:flex;flex-wrap:wrap;gap:10px;flex-shrink:0;}

/* ── Mini cards ────────────────────────────────────────────── */
.mini-card{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 16px;background:var(--bg-page);
  border-radius:var(--r-md);border:1px solid var(--bd);min-width:80px;
}
.mini-card span{font-size:11px;color:var(--tx-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.mini-card strong{font-size:1.25rem;font-weight:900;color:var(--tx-primary);}

/* ── Stats ─────────────────────────────────────────────────── */
.stats-grid{display:grid;gap:12px;margin-bottom:20px;}
.stats-grid.four{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.stats-grid.four{grid-template-columns:repeat(2,1fr);}}

.metric-box{
  background:var(--bg-card);border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:18px 20px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow-sm);
}
.metric-box span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tx-muted);}
.metric-box strong{
  font-size:2rem;font-weight:900;
  background:var(--kf-gradient-h);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
}

/* ── Sections ──────────────────────────────────────────────── */
.section-block{margin-bottom:24px;}
.section-heading{margin-bottom:12px;}
.section-heading h2{margin:4px 0 4px;font-size:1.15rem;font-weight:800;color:var(--tx-primary);}
.section-heading p{margin:0;color:var(--tx-second);font-size:.87rem;}

/* ── Nav grid ──────────────────────────────────────────────── */
.nav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;}
.nav-grid-card,.nav-grid a{
  display:flex;flex-direction:column;gap:5px;padding:14px 16px;
  background:var(--bg-card);border:1px solid var(--bd);border-radius:var(--r-lg);
  text-decoration:none;color:var(--tx-primary);font-weight:700;font-size:.88rem;
  transition:all var(--t);box-shadow:var(--shadow-sm);
}
.nav-grid-card:hover,.nav-grid a:hover{
  border-color:var(--kf-purple);box-shadow:var(--shadow-md),0 0 0 1px var(--kf-purple);
  transform:translateY(-1px);
}

/* ── Buttons ───────────────────────────────────────────────── */
button[type="submit"],.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 22px;background:var(--kf-gradient);color:#fff;
  border:none;border-radius:var(--r-full);
  font:700 14px/1 'Cairo',sans-serif;cursor:pointer;
  transition:opacity var(--t),transform var(--t),box-shadow var(--t);
  box-shadow:0 4px 14px rgba(139,44,245,.28);
  text-decoration:none;white-space:nowrap;
}
button[type="submit"]:hover,.btn-primary:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px rgba(139,44,245,.38);}

.inline-link-button{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 15px;background:var(--bg-page);
  color:var(--tx-primary);border:1px solid var(--bd);
  border-radius:var(--r-full);font:600 13px/1 'Cairo',sans-serif;
  cursor:pointer;text-decoration:none;transition:all var(--t);white-space:nowrap;
}
.inline-link-button:hover{background:var(--tx-primary);color:var(--bg-card);border-color:var(--tx-primary);}

.danger-button{color:var(--kf-danger)!important;border-color:rgba(239,68,68,.3)!important;}
.danger-button:hover{background:var(--kf-danger)!important;color:#fff!important;border-color:var(--kf-danger)!important;}

.client-profile-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px;}

/* ── Forms ─────────────────────────────────────────────────── */
input[type="text"],input[type="email"],input[type="password"],
input[type="date"],input[type="number"],input[type="search"],
input[type="url"],input[type="tel"],select,textarea{
  width:100%;padding:10px 13px;
  border:1.5px solid var(--bd);border-radius:var(--r-md);
  background:var(--bg-input);color:var(--tx-primary);
  font:500 14px/1.5 'Cairo',sans-serif;outline:none;
  transition:border-color var(--t),box-shadow var(--t),background .25s;
  box-sizing:border-box;
}
input:focus,select:focus,textarea:focus{border-color:var(--kf-purple);box-shadow:var(--shadow-glow);}
input[disabled],select[disabled],textarea[disabled]{opacity:.5;cursor:not-allowed;}
label{display:block;font-size:13px;font-weight:700;color:var(--tx-second);margin-bottom:4px;}
.stack-form p{margin:0 0 14px;}
.form-row{margin-bottom:14px;}
.form-grid{display:grid;gap:14px;}
.form-grid.two{grid-template-columns:1fr 1fr;}
@media(max-width:640px){.form-grid.two{grid-template-columns:1fr;}}
.kpi-input-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:14px;}

/* Toggle switch */
.toggle-wrap{display:flex;align-items:center;gap:10px;cursor:pointer;padding:4px 0;}
.toggle-input{display:none;}
.toggle-track{
  width:42px;height:22px;background:var(--bd);border-radius:var(--r-full);
  position:relative;transition:background var(--t);flex-shrink:0;
}
.toggle-input:checked+.toggle-track{background:var(--kf-purple);}
.toggle-track::after{
  content:'';position:absolute;top:2px;left:2px;
  width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform var(--t);
}
.toggle-input:checked+.toggle-track::after{transform:translateX(20px);}
.toggle-label{font-size:13px;font-weight:600;color:var(--tx-second);}

/* ── Tables ────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;}
.pretty-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.pretty-table th{
  padding:9px 13px;text-align:left;
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tx-muted);border-bottom:2px solid var(--bd);white-space:nowrap;
}
.pretty-table td{padding:11px 13px;border-bottom:1px solid var(--bd);color:var(--tx-primary);vertical-align:middle;}
.pretty-table tbody tr{transition:background var(--t);}
.pretty-table tbody tr:hover{background:var(--bg-hover);}
.pretty-table tbody tr:last-child td{border-bottom:none;}

.table-thumb{width:50px;height:50px;border-radius:var(--r-sm);object-fit:cover;background:var(--bg-page);border:1px solid var(--bd);}
.table-thumb-empty{display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--tx-muted);}

/* Checkbox in tables */
.table-checkbox{width:16px;height:16px;accent-color:var(--kf-purple);cursor:pointer;}

/* ── Pills ─────────────────────────────────────────────────── */
.inline-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:700;white-space:nowrap;border:1px solid transparent;
}
.success-pill{background:rgba(34,197,94,.1);color:#15803d;border-color:rgba(34,197,94,.22);}
.warning-pill{background:rgba(245,158,11,.1);color:#92400e;border-color:rgba(245,158,11,.22);}
.danger-pill{background:rgba(239,68,68,.1);color:#b91c1c;border-color:rgba(239,68,68,.22);}
.info-pill{background:rgba(6,182,212,.1);color:#0e7490;border-color:rgba(6,182,212,.22);}
.neutral-pill{background:var(--bg-page);color:var(--tx-second);border-color:var(--bd);}
.muted-pill{background:var(--bg-page);color:var(--tx-muted);border-color:var(--bd);}
.grad-pill{background:var(--kf-gradient);color:#fff;border-color:transparent;}
.workflow-pill{background:rgba(139,44,245,.09);color:var(--kf-purple);border-color:rgba(139,44,245,.18);}

/* Status helpers */
.status-active{color:#15803d;}.status-prospect{color:#92400e;}.status-inactive{color:#b91c1c;}.status-churned{color:#64748b;}
.post-flag{border-radius:var(--r-full);font-size:11px;font-weight:700;padding:3px 9px;}
.flag-success{background:rgba(34,197,94,.1);color:#15803d;}
.flag-warning{background:rgba(245,158,11,.1);color:#92400e;}
.flag-danger{background:rgba(239,68,68,.1);color:#b91c1c;}
.flag-info{background:rgba(6,182,212,.1);color:#0e7490;}

/* ── Messages ──────────────────────────────────────────────── */
.message.error{
  padding:12px 16px;background:rgba(239,68,68,.07);
  border:1px solid rgba(239,68,68,.22);border-radius:var(--r-md);
  color:#dc2626;font-size:13px;font-weight:600;margin-bottom:14px;
}

.inline-edit-panel{display:none;padding:16px;background:var(--bg-page);border-radius:var(--r-md);border:1px solid var(--bd);margin-top:10px;}
.inline-edit-panel.active{display:block;}
.inline-edit-toggle{
  padding:6px 14px;background:var(--bg-page);border:1px solid var(--bd);
  border-radius:var(--r-full);font:600 12.5px/1 'Cairo',sans-serif;
  color:var(--tx-second);cursor:pointer;transition:all var(--t);
}
.inline-edit-toggle:hover{border-color:var(--kf-purple);color:var(--kf-purple);}

.muted-text{color:var(--tx-muted);font-size:.87rem;}
.top-space{margin-top:16px;}
.empty-note{padding:44px;text-align:center;color:var(--tx-muted);font-size:.87rem;}

/* ── Login page ────────────────────────────────────────────── */
.login-wrapper{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg-page);padding:24px;position:relative;overflow:hidden;
}
.login-wrapper::before{
  content:'';position:fixed;inset:0;
  background:radial-gradient(ellipse at 20% 50%,rgba(217,70,239,.1),transparent 40%),
    radial-gradient(ellipse at 80% 20%,rgba(59,130,246,.1),transparent 40%);
  pointer-events:none;
}
.login-box{
  position:relative;z-index:1;background:var(--bg-card);
  border:1px solid var(--bd);border-radius:var(--r-xl);
  padding:44px 40px;width:100%;max-width:400px;box-shadow:var(--shadow-lg);
}
.login-logo{display:block;height:48px;margin:0 auto 28px;object-fit:contain;}
.login-box h2{margin:0 0 4px;font-size:1.4rem;font-weight:900;text-align:center;color:var(--tx-primary);}
.login-box>p{text-align:center;color:var(--tx-muted);margin:0 0 24px;}
.login-box form p{margin:0 0 12px;}
.login-box form button{width:100%;margin-top:4px;padding:12px;font-size:15px;}
.error-message{
  background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.22);color:#dc2626;
  padding:9px 13px;border-radius:var(--r-md);font-size:13px;font-weight:600;margin-bottom:14px;
}

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;}
.modal-overlay.hidden{display:none;}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);}
.modal-box{
  position:relative;z-index:2;background:var(--bg-card);
  border:1px solid var(--bd);border-radius:var(--r-xl);
  padding:28px 26px;width:min(560px,calc(100vw - 32px));
  max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);
}
.modal-box h2,.modal-box h3{margin:0 0 18px;color:var(--tx-primary);}
.modal-close{
  position:absolute;top:12px;right:12px;
  background:var(--bg-page);border:1px solid var(--bd);border-radius:50%;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:15px;color:var(--tx-muted);transition:all var(--t);
}
.modal-close:hover{background:var(--kf-danger);color:#fff;border-color:var(--kf-danger);}

/* ── Task side panel ───────────────────────────────────────── */
.task-panel-overlay{
  position:fixed;inset:0;z-index:8888;
  display:flex;align-items:flex-start;justify-content:flex-end;
  pointer-events:none;
}
.task-panel-overlay.open{pointer-events:all;}
.task-panel-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .25s;
}
.task-panel-overlay.open .task-panel-backdrop{opacity:1;}
.task-panel{
  position:relative;z-index:2;background:var(--bg-card);
  width:min(500px,100vw);height:100vh;overflow-y:auto;
  border-left:1px solid var(--bd);
  transform:translateX(100%);transition:transform .25s ease;
  box-shadow:-8px 0 40px rgba(0,0,0,.12);
  display:flex;flex-direction:column;
}
.task-panel-overlay.open .task-panel{transform:translateX(0);}
.task-panel-head{
  padding:18px 22px;border-bottom:1px solid var(--bd);
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-shrink:0;
  position:sticky;top:0;background:var(--bg-card);z-index:2;
}
.task-panel-body{padding:20px 22px;flex:1;}
.task-panel-foot{padding:14px 22px;border-top:1px solid var(--bd);flex-shrink:0;}

/* ── Comments ──────────────────────────────────────────────── */
.comments-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.comment-item{padding:10px 13px;background:var(--bg-page);border-radius:var(--r-md);border:1px solid var(--bd);}
.comment-meta{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.comment-avatar{
  width:24px;height:24px;border-radius:50%;background:var(--kf-gradient);
  color:#fff;font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.comment-author{font-size:12px;font-weight:700;color:var(--tx-primary);}
.comment-time{font-size:11px;color:var(--tx-muted);}
.comment-text{font-size:13px;color:var(--tx-second);line-height:1.6;}
.comment-client-badge{
  font-size:10px;background:rgba(217,70,239,.1);color:var(--kf-pink);
  border-radius:var(--r-full);padding:2px 7px;font-weight:700;
}

/* ── No account page ───────────────────────────────────────── */
.no-account-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg-page);padding:32px;position:relative;
}
.no-account-page::before{
  content:'';position:fixed;inset:0;
  background:radial-gradient(ellipse at 20% 50%,rgba(217,70,239,.09),transparent 40%),
    radial-gradient(ellipse at 80% 20%,rgba(59,130,246,.09),transparent 40%);
  pointer-events:none;
}
.no-account-box{
  position:relative;z-index:1;text-align:center;max-width:460px;
  background:var(--bg-card);border:1px solid var(--bd);
  border-radius:var(--r-xl);padding:48px 40px;box-shadow:var(--shadow-lg);
}

/* ── CRM board ─────────────────────────────────────────────── */
.crm-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:16px;align-items:flex-start;}
.crm-column{flex:0 0 270px;background:var(--bg-page);border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden;}
.crm-col-head{
  padding:12px 14px;border-bottom:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;
}
.crm-col-title{font-size:13px;font-weight:800;color:var(--tx-primary);}
.crm-col-count{background:var(--bd);color:var(--tx-muted);border-radius:var(--r-full);padding:2px 8px;font-size:11px;font-weight:800;}
.crm-cards{padding:8px;display:flex;flex-direction:column;gap:8px;min-height:80px;}
.crm-card{
  background:var(--bg-card);border:1px solid var(--bd);border-radius:var(--r-md);
  padding:13px;cursor:pointer;transition:all var(--t);box-shadow:var(--shadow-sm);
}
.crm-card:hover{border-color:var(--kf-purple);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.crm-card-name{font-weight:700;font-size:13.5px;color:var(--tx-primary);margin-bottom:4px;}
.crm-card-phone{font-size:12px;color:var(--tx-muted);margin-bottom:7px;}
.crm-card-activity{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;}
.activity-dot{width:7px;height:7px;border-radius:50%;background:var(--tx-muted);flex-shrink:0;}
.act-call .activity-dot{background:#3b82f6;}
.act-meeting .activity-dot{background:#8b2cf5;}
.act-whatsapp .activity-dot{background:#22c55e;}
.act-overdue .activity-dot{background:#ef4444;}

/* ── Content preview grid ──────────────────────────────────── */
.preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;border-radius:var(--r-md);overflow:hidden;}
.preview-cell{aspect-ratio:1;position:relative;overflow:hidden;background:var(--bg-page);cursor:pointer;}
.preview-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .22s;}
.preview-cell:hover img{transform:scale(1.04);}
.preview-cell-badge{position:absolute;top:8px;left:8px;}
.preview-cell-date{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.65);color:#fff;border-radius:6px;padding:3px 7px;font-size:11px;font-weight:700;}

/* ── Form field type chip ──────────────────────────────────── */
.field-type{display:inline;margin-left:4px;font-size:10px;color:var(--tx-muted);font-weight:500;text-transform:uppercase;}

/* ── Sticky actions ────────────────────────────────────────── */
.sticky-actions{
  position:sticky;bottom:0;background:var(--bg-page);padding:14px 0;
  display:flex;gap:10px;align-items:center;z-index:10;
  border-top:1px solid var(--bd);margin-top:20px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:768px){
  .content{padding:14px 14px 40px;}
  .sidebar{position:fixed;z-index:200;transform:translateX(-100%);}
  .sidebar.mobile-open{transform:translateX(0);}
  .sidebar.mobile-open .sidebar-filter-card{display:block !important;}
  .hero{padding:18px 20px;}
  .form-card,.prose-card{padding:16px 18px;}
}
/* Floating burger button */
.floating-sidebar-toggle{
  position:fixed;
  top:16px;
  left:16px;
  z-index:1001;
  width:42px;
  height:42px;
  border:none;
  border-radius:10px;
  background:#0a0f1e;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  box-shadow:var(--shadow-md);
  transition:background var(--t), opacity var(--t), transform var(--t);
}

.floating-sidebar-toggle:hover{
  background:#11182b;
}

/* Fully hide sidebar */
.sidebar.sidebar-hidden{
  transform:translateX(-100%);
  opacity:0;
  pointer-events:none;
  position:fixed;
  left:0;
  top:0;
}

/* Let content use full width when sidebar is hidden */
.sidebar.sidebar-hidden + .content{
  margin-left:0;
}

/* Remove old collapsed behavior if not needed */
.sidebar.collapsed{
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
}

/* On mobile keep burger visible */
@media(max-width:768px){
  .floating-sidebar-toggle{
    top:12px;
    left:12px;
    width:40px;
    height:40px;
  }

  .sidebar{
    position:fixed;
    z-index:200;
    left:0;
    top:0;
  }

  .sidebar.sidebar-hidden{
    transform:translateX(-100%);
  }

  .sidebar.mobile-open{
    transform:translateX(0);
    opacity:1;
    pointer-events:auto;
  }
}
.sidebar-brand {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  justify-content:flex-end; /* push logo to the right */
  padding:16px 14px;
}

.sidebar-logo{
  margin-left:auto; /* ensures it sticks right even if layout changes */
}

.sidebar.collapsed .sidebar-brand{
  justify-content:center;
}

.sidebar-user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}

.sidebar-user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Long-form content: posts captions, task descriptions ──────────────
   Preserves the line breaks the author typed. Anything rendered into
   .kf-longtext must NOT also be passed through nl2br() — pre-wrap keeps
   the literal newline, so a <br> on top of it doubles every break. */
.kf-longtext{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
/* dir is set per-element from the stored text_direction, so an RTL caption
   reads correctly inside an LTR page. Align to whichever edge it starts at. */
.kf-longtext[dir="rtl"]{text-align:right;}
.kf-longtext[dir="ltr"]{text-align:left;}

/* Author-facing direction picker (includes/text_direction.php) */
.kf-dir-picker{margin:10px 0;}
.kf-dir-label{
  display:block;font-size:.8rem;font-weight:700;
  color:var(--tx-primary);margin-bottom:6px;
}
.kf-dir-opts{display:inline-flex;gap:4px;background:var(--bg-card);
  border:1px solid var(--bd);border-radius:var(--r-full);padding:3px;}
.kf-dir-opt{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  padding:4px 12px;border-radius:var(--r-full);
  font-size:.75rem;font-weight:700;color:var(--tx-muted);
  transition:.15s;margin:0;
}
.kf-dir-opt input{margin:0;accent-color:var(--kf-purple, #7c3aed);}
.kf-dir-opt:has(input:checked){
  background:var(--kf-gradient, linear-gradient(135deg,#7c3aed,#a855f7));
  color:#fff;
}

/* The nav Check In/Check Out button lived here. The whole clock-in/
   clock-out system was removed on 2026-07-22. */

/* ── "Off today" strip (team feed) ─────────────────────────────────────
   Who has an approved day-off request covering today — see
   req_members_off_today(). Amber rather than the old green: this is an
   absence list, and it should not read as a "everything is fine" signal. */
.off-today{padding:14px 18px;margin-bottom:16px;}
.off-today-head{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font-size:.82rem;color:var(--tx-primary);
}
.off-today-dot{
  width:8px;height:8px;border-radius:50%;background:#f59e0b;
  box-shadow:0 0 0 3px rgba(245,158,11,.18);
}
.off-today-count{
  margin-left:auto;font-weight:800;font-size:.72rem;
  background:rgba(245,158,11,.14);color:#b45309;
  border-radius:999px;padding:2px 9px;
}
.off-today-empty{margin:0;font-size:.82rem;color:var(--tx-muted);}
.off-today-list{
  list-style:none;margin:0;padding:0;
  display:flex;gap:10px;flex-wrap:wrap;
}
.off-today-item{
  display:flex;align-items:center;gap:8px;
  background:var(--bg-page);border:1px solid var(--bd);
  border-radius:999px;padding:4px 12px 4px 4px;
}
.off-today-avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:var(--kf-gradient,linear-gradient(135deg,#7c3aed,#a855f7));
  color:#fff;font-size:.66rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.off-today-avatar img{width:100%;height:100%;object-fit:cover;}
.off-today-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.off-today-name{
  font-size:.78rem;font-weight:700;color:var(--tx-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;
}
.off-today-when{font-size:.66rem;color:var(--tx-muted);}

/* ── Notification rows: per-item dismiss ───────────────────────────────
   The dismiss button overlays the row (the row itself is an <a>, so the
   form can't be nested inside it). Revealed on hover/focus so it doesn't
   compete with the notification content, but always reachable by keyboard. */
.notif-row:hover{background:rgba(139,44,245,.04);}
.notif-dismiss button{
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--bd);background:var(--bg-card);
  color:var(--tx-muted);font-size:15px;line-height:1;
  cursor:pointer;opacity:0;transition:.15s;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.notif-row:hover .notif-dismiss button,
.notif-dismiss button:focus-visible{opacity:1;}
.notif-dismiss button:hover{
  background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#ef4444;
}
/* Touch devices have no hover — keep it visible there. */
@media (hover:none){.notif-dismiss button{opacity:1;}}

/* ── Files: Drive-style client folders ─────────────────────────────────
   Purely a visual grouping by client_id — there are no real folders here,
   just one flat directory per client on disk. */
.files-folder-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.files-folder-head h2{margin:0;font-size:1rem;color:var(--tx-primary);}
.files-folder-sub{font-size:.78rem;color:var(--tx-muted);}
.files-folder-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
}
.files-folder{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:18px 12px 14px;text-align:center;text-decoration:none;
  background:var(--bg-card);border:1px solid var(--bd);
  border-radius:14px;transition:.15s;
}
.files-folder:hover{
  border-color:rgba(139,44,245,.4);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.10);
}
.files-folder-icon{color:var(--kf-purple,#8b2cf5);line-height:0;}
/* An empty client reads as muted rather than absent. */
.files-folder-icon.is-empty{color:var(--tx-muted);opacity:.5;}
.files-folder-name{
  font-size:.84rem;font-weight:700;color:var(--tx-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.files-folder-meta{font-size:.7rem;color:var(--tx-muted);}
.files-breadcrumb{
  display:inline-block;margin-bottom:4px;font-size:.78rem;font-weight:700;
  color:var(--kf-purple,#8b2cf5);text-decoration:none;
}
.files-breadcrumb:hover{text-decoration:underline;}

/* ── Team feed: announcement cards ─────────────────────────────────────
   One system, three types. Every card sets --ann-accent (an "r,g,b" triple)
   and the rail, medallion halo, wash and hover bloom all derive from it, so
   adding a type is a colour, not a new rule. */
.ann-feed{display:flex;flex-direction:column;gap:14px;}

.ann-card{
  --ann-accent:139,44,245;
  position:relative;
  display:flex;align-items:flex-start;gap:18px;
  padding:22px 26px 22px 30px;
  background:var(--bg-card);
  border:1px solid var(--bd);
  border-radius:18px;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  /* Feed assembles itself on load — one orchestrated moment, not per-card fidget. */
  animation:annIn .5s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--i,0) * 55ms);
}
@keyframes annIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}
/* The accent rail — the card's spine. */
.ann-card::before{
  content:'';position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,
    rgba(var(--ann-accent),1) 0%,
    rgba(var(--ann-accent),.35) 100%);
}
/* Atmospheric wash bleeding from the rail, so the colour reads as light
   rather than a flat tint over the whole card. */
.ann-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 0% 0%,
    rgba(var(--ann-accent),.10) 0%,
    rgba(var(--ann-accent),.03) 42%,
    transparent 72%);
}
.ann-card > *{position:relative;z-index:1;}
.ann-card:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--ann-accent),.42);
  box-shadow:0 12px 30px -8px rgba(var(--ann-accent),.28);
}
@media (prefers-reduced-motion:reduce){
  .ann-card{animation:none;transition:none;}
  .ann-card:hover{transform:none;}
}

/* Emoji medallion with a halo ring in the type's accent. */
.ann-medallion{
  flex:0 0 auto;
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;line-height:1;
  background:rgba(var(--ann-accent),.12);
  box-shadow:inset 0 0 0 1px rgba(var(--ann-accent),.30),
             0 0 0 4px rgba(var(--ann-accent),.06);
}

.ann-main{flex:1;min-width:0;}

/* Meta first, quiet and small — the title should win the eye. */
.ann-kicker{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:.72rem;color:var(--tx-muted);margin-bottom:5px;
}
.ann-type{
  font-weight:800;text-transform:uppercase;letter-spacing:.09em;
  color:rgba(var(--ann-accent),1);
}
.ann-dot{
  width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.45;flex:0 0 auto;
}
.ann-title{
  margin:0 0 7px;
  font-size:1.15rem;font-weight:800;line-height:1.3;
  color:var(--tx-primary);letter-spacing:-.01em;
}
.ann-body{
  margin:0;color:var(--tx-second);
  font-size:.9rem;line-height:1.72;max-width:68ch;
}

/* Pinned: a ribbon in the corner and a persistent accent ring, so it reads
   as pinned at a glance without shouting over the others. */
.ann-card.is-pinned{border-color:rgba(var(--ann-accent),.38);}
.ann-ribbon{
  position:absolute;top:0;right:0;z-index:2;
  font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:#fff;background:rgba(var(--ann-accent),.92);
  padding:4px 14px 5px;
  border-radius:0 18px 0 12px;
}
.ann-card.is-pinned .ann-actions{right:14px;top:38px;}

/* Announcements are archived, not deleted, so a card can carry more than
   one control (unpin / archive, or restore in the archive view). The
   container is what gets positioned; the forms inside sit in a row. */
.ann-actions{position:absolute;top:14px;right:14px;z-index:2;
  display:flex;align-items:center;gap:6px;}
.ann-delete{margin:0;}
.ann-delete button{
  width:26px;height:26px;border-radius:50%;padding:0;
  border:1px solid var(--bd);background:var(--bg-card);
  color:var(--tx-muted);font-size:15px;line-height:1;cursor:pointer;
  opacity:0;transition:.15s;
  display:flex;align-items:center;justify-content:center;
}
/* The labelled actions need to read as words, not fit in a 26px circle. */
.ann-delete button.ann-act{
  width:auto;height:auto;border-radius:999px;padding:4px 11px;
  font-size:11px;font-weight:700;white-space:nowrap;
}
.ann-card:hover .ann-delete button,
.ann-delete button:focus-visible{opacity:1;}
.ann-delete button:hover{
  background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#ef4444;
}
/* Unpin and restore are not destructive — do not flash them red. */
.ann-delete button.ann-act:hover{
  background:rgba(139,44,245,.12);border-color:rgba(139,44,245,.35);color:var(--kf-purple);
}
@media (hover:none){.ann-delete button{opacity:1;}}

/* Feed / archive switch */
.ann-views{display:flex;gap:8px;margin:0 0 18px;}
.ann-view{
  padding:7px 15px;border-radius:999px;border:1px solid var(--bd);
  background:var(--bg-card);color:var(--tx-muted);
  font-size:.8rem;font-weight:700;text-decoration:none;transition:.15s;
}
.ann-view:hover{border-color:var(--kf-purple);color:var(--kf-purple);}
.ann-view.is-on{background:var(--kf-purple);border-color:var(--kf-purple);color:#fff;}
.ann-view-cnt{opacity:.7;font-weight:600;}
.ann-archived-note{
  font-size:.72rem;color:var(--tx-muted);margin-top:6px;font-style:italic;
}

@media (max-width:540px){
  .ann-card{padding:18px 18px 18px 22px;gap:13px;}
  .ann-medallion{width:42px;height:42px;font-size:1.3rem;}
  .ann-title{font-size:1.02rem;}
}

/* ── Links inside long-form content (captions, descriptions, announcements) ──
   Rendered by text_longform_html(), which escapes first and only ever emits
   http(s) anchors. Underlined rather than colour-only so they're still
   identifiable without colour vision. */
.kf-link{
  color:var(--kf-purple,#8b2cf5);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
  word-break:break-all;      /* a long URL must not widen its container */
}
.kf-link:hover{text-decoration-thickness:2px;}
/* On the dark public review / preview pages the brand purple goes muddy. */
.caption .kf-link,.cap .kf-link{color:#7c5cff;}

/* ── Dashboard: "Latest from the team" ─────────────────────────────────
   The first thing on the dashboard, so it's built to be looked at. Shares
   the --ann-accent system with the team feed cards: one rgb triple per
   type drives rail, medallion, wash and hover, so the two pages read as
   one platform. The first item is the lead and spans the row. */
.dash-ann-wrap{margin-bottom:20px;}
.dash-ann-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.dash-ann-head h2{margin:0;font-size:1rem;font-weight:800;color:var(--tx-primary);letter-spacing:-.01em;}
.dash-ann-all{
  margin-left:auto;font-size:.78rem;font-weight:700;
  color:var(--kf-purple,#8b2cf5);text-decoration:none;
}
.dash-ann-all:hover{text-decoration:underline;}
.dash-ann-pulse{
  width:8px;height:8px;border-radius:50%;background:var(--kf-purple,#8b2cf5);
  box-shadow:0 0 0 0 rgba(139,44,245,.6);
  animation:dashAnnPulse 2.4s ease-out infinite;
}
@keyframes dashAnnPulse{
  0%{box-shadow:0 0 0 0 rgba(139,44,245,.55);}
  70%{box-shadow:0 0 0 8px rgba(139,44,245,0);}
  100%{box-shadow:0 0 0 0 rgba(139,44,245,0);}
}

.dash-ann-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}
/* The newest item earns the full width and a longer excerpt. */
.dash-ann.is-lead{grid-column:1 / -1;}

.dash-ann{
  --ann-accent:139,44,245;
  position:relative;overflow:hidden;
  display:flex;align-items:flex-start;gap:16px;
  padding:20px 22px 20px 26px;
  background:var(--bg-card);
  border:1px solid var(--bd);
  border-radius:16px;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, border-color .2s;
  animation:dashAnnIn .55s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--i,0) * 70ms);
}
@keyframes dashAnnIn{
  from{opacity:0;transform:translateY(12px) scale(.985);}
  to{opacity:1;transform:none;}
}
.dash-ann::before{
  content:'';position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,rgba(var(--ann-accent),1),rgba(var(--ann-accent),.3));
}
/* Wash bleeding from the rail — colour as light, not a flat tint. */
.dash-ann::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 100% at 0% 0%,
    rgba(var(--ann-accent),.13) 0%, rgba(var(--ann-accent),.04) 45%, transparent 75%);
}
.dash-ann > *{position:relative;z-index:1;}
.dash-ann:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--ann-accent),.45);
  box-shadow:0 16px 34px -10px rgba(var(--ann-accent),.35);
}

/* Medallion drifts gently — the one bit of life on an otherwise still page. */
.dash-ann-ico{
  flex:0 0 auto;
  width:52px;height:52px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;line-height:1;
  background:rgba(var(--ann-accent),.13);
  box-shadow:inset 0 0 0 1px rgba(var(--ann-accent),.28);
  animation:dashAnnFloat 4.5s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 220ms);
}
.dash-ann.is-lead .dash-ann-ico{width:62px;height:62px;font-size:2.1rem;border-radius:18px;}
@keyframes dashAnnFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%    {transform:translateY(-4px) rotate(-3deg);}
}

.dash-ann-body{flex:1;min-width:0;}
.dash-ann-type{
  display:block;font-size:.66rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.11em;
  color:rgba(var(--ann-accent),1);margin-bottom:3px;
}
.dash-ann h3{
  margin:0 0 5px;font-size:1.02rem;font-weight:800;
  line-height:1.32;color:var(--tx-primary);letter-spacing:-.01em;
}
.dash-ann.is-lead h3{font-size:1.22rem;}
.dash-ann p{
  margin:0;font-size:.86rem;line-height:1.6;color:var(--tx-second);
  white-space:pre-wrap;overflow-wrap:anywhere;
}

/* Pinned: a slow sheen so it catches the eye once, then settles. */
.dash-ann.is-pinned{border-color:rgba(var(--ann-accent),.4);}
.dash-ann-pin{
  position:absolute;top:12px;right:14px;z-index:2;
  font-size:.82rem;opacity:.75;
}
.dash-ann.is-pinned::after{
  background:
    radial-gradient(130% 100% at 0% 0%,
      rgba(var(--ann-accent),.16) 0%, rgba(var(--ann-accent),.05) 45%, transparent 75%),
    linear-gradient(100deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);
  background-size:100% 100%, 220% 100%;
  background-repeat:no-repeat;
  animation:dashAnnSheen 6s ease-in-out infinite;
}
@keyframes dashAnnSheen{
  0%,70%{background-position:0 0, -120% 0;}
  100%  {background-position:0 0,  220% 0;}
}

@media (prefers-reduced-motion:reduce){
  .dash-ann,.dash-ann-ico,.dash-ann-pulse,.dash-ann.is-pinned::after{animation:none;}
  .dash-ann:hover{transform:none;}
}
@media (max-width:540px){
  .dash-ann{padding:16px 16px 16px 20px;gap:12px;}
  .dash-ann-ico,.dash-ann.is-lead .dash-ann-ico{width:44px;height:44px;font-size:1.4rem;}
  .dash-ann.is-lead h3{font-size:1.05rem;}
}