/* ═══════════════════════════════════════════
   KEOU AGENCY — Design System 2.0
   Poppins (headings) + Inter (body)
   Monochrome palette + smooth animations
   ═══════════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Variables — Dark Premium ── */
:root{
  --ink:#efefef;
  --ink-soft:rgba(255,255,255,.80);
  --ink-muted:rgba(255,255,255,.55);
  --ink-faint:rgba(255,255,255,.35);
  --ink-hover:rgba(255,255,255,.90);
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.08);
  --surface-3:rgba(255,255,255,.12);
  --border:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.22);
  --bg:#0a0a0a;
  --success:#16a34a;
  --success-soft:rgba(22,163,74,.1);
  --error:#dc2626;
  --error-soft:rgba(220,38,38,.08);
  --warning:#d97706;
  --warning-soft:rgba(217,119,6,.1);
  --accent:#6366f1;
  --accent-soft:rgba(99,102,241,.1);
  --radius:16px;
  --radius-sm:12px;
  --radius-xs:8px;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:0 20px 60px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.08);
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:cubic-bezier(0.4, 0, 0.2, 1);
  --focus-ring:0 0 0 3px rgba(99,102,241,0.2);
  --transition-fast:.15s var(--ease-smooth);
  --transition-base:.25s var(--ease-out);
  --transition-slow:.4s var(--ease-out);
}

/* ── Base ── */
html{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  color-scheme:dark;
}
body{
  min-height:100vh;display:flex;flex-direction:row;
  background:var(--bg);
  background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:24px 24px;
  position:relative;
  overflow-x:hidden;
}
/* ═══════════════════════════════════════════
   NATIVE APP FLUIDITY LAYER
   Touch feedback, smooth transitions, momentum
   ═══════════════════════════════════════════ */

/* ── Touch feedback on all interactive elements ── */
a,button,input[type="submit"],input[type="button"],.action-btn,.btn-primary,.btn-secondary,.btn-ghost,.card-interactive,.tab-btn,.mobile-bottom-nav-item,.mobile-more-item{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ── Tap scale — subtle press feedback like native iOS ── */
.btn-primary:active,.btn-secondary:active,.btn-ghost:active,.action-btn:active,.mobile-bottom-nav-item:active,.mobile-more-item:active{
  transform:scale(0.95);transition-duration:.08s;
}
.card-interactive:active,.tool-card:active{
  transform:scale(0.98);transition-duration:.1s;
}

/* ── Page content fade-in on load ── */
.page-container,.app-content{
  animation:pageIn .35s var(--ease-out) both;
}
@keyframes pageIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Smooth scroll everywhere (iOS momentum) ── */
*{-webkit-overflow-scrolling:touch}
html{scroll-behavior:smooth}

/* ── Image/media loading shimmer ── */
img,video{transition:opacity .3s var(--ease-smooth)}
img[loading="lazy"]{opacity:0}
img.loaded,img:not([loading="lazy"]){opacity:1}

/* ── Micro-interaction: focus rings with smooth transition ── */
:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  transition:box-shadow .2s var(--ease-smooth);
}

/* ── Smooth color/border transitions on hover states ── */
a{transition:color .15s var(--ease-smooth)}
svg{transition:transform .2s var(--ease-out),stroke .15s var(--ease-smooth)}

/* ── List/grid items stagger animation ── */
@keyframes staggerIn{
  from{opacity:0;transform:translateY(8px) scale(0.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.stagger-in{animation:staggerIn .3s var(--ease-out) both}

/* ── Skeleton loading pulse (smoother) ── */
@keyframes skeletonPulse{
  0%,100%{opacity:.06}
  50%{opacity:.12}
}

/* ── Rubber band overscroll visual (iOS-like) ── */
@media(max-width:768px){
  body{overscroll-behavior-y:contain}
  .page-container,.app-content{overscroll-behavior:contain}
}

/* ── Ambient Glow Background ── */
.ambient-bg{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.ambient-bg::before{
  content:'';position:absolute;
  width:140%;height:140%;top:-20%;left:-20%;
  background:
    radial-gradient(circle 650px at 10% 8%, rgba(99,102,241,.06) 0%, transparent 65%),
    radial-gradient(circle 550px at 88% 5%, rgba(139,92,246,.05) 0%, transparent 60%),
    radial-gradient(circle 800px at 50% 100%, rgba(79,70,229,.04) 0%, transparent 55%),
    radial-gradient(circle 500px at 3% 55%, rgba(168,85,247,.03) 0%, transparent 50%);
  filter:blur(100px);
}
.ambient-bg::after{
  content:'';position:absolute;inset:0;
  opacity:.015;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:128px 128px;
}

/* Ensure structural content sits above ambient layer (don't touch lightbox/toast/modals) */
.app-sidebar,main,.main,.page-container,.app-content,.auth-page,footer,.footer{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ── Selection ── */
::selection{background:rgba(99,102,241,0.25);color:#fff}

/* ── Custom Scrollbar ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:100px;transition:background .15s ease}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}

/* ── Focus Visible ── */
:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ── Typography ── */
h1,h2,h3,h4{font-family:'Poppins',sans-serif;font-weight:700;line-height:1.2}
h1{font-size:32px;letter-spacing:-0.5px}
h2{font-size:24px;letter-spacing:-0.3px}
h3{font-size:18px}
h4{font-size:15px;font-weight:600}
p{color:var(--ink-soft);font-size:15px}

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */

@keyframes fadeIn{
  from{opacity:0}to{opacity:1}
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeInDown{
  from{opacity:0;transform:translateY(-12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes slideUp{
  from{transform:translateY(100%)}to{transform:translateY(0)}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(0.95)}
  to{opacity:1;transform:scale(1)}
}
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{
  0%,100%{opacity:1}50%{opacity:.5}
}
@keyframes countUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes borderGlow{
  0%,100%{border-color:var(--border)}
  50%{border-color:var(--ink-faint)}
}
@keyframes tapBounce{
  0%{transform:scale(0.97)}50%{transform:scale(1.02)}100%{transform:scale(1)}
}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes fadeOutDown{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(12px)}
}
@keyframes scaleOut{
  from{opacity:1;transform:scale(1)}
  to{opacity:0;transform:scale(0.95)}
}

/* Page enter animation */
.page-enter{animation:fadeInUp .5s var(--ease-out) both}
.page-enter-delay-1{animation-delay:.05s}
.page-enter-delay-2{animation-delay:.1s}
.page-enter-delay-3{animation-delay:.15s}
.page-enter-delay-4{animation-delay:.2s}

/* Stagger children animation */
.stagger-in > *{
  opacity:0;animation:fadeInUp .45s var(--ease-out) both;
}
.stagger-in > *:nth-child(1){animation-delay:.03s}
.stagger-in > *:nth-child(2){animation-delay:.06s}
.stagger-in > *:nth-child(3){animation-delay:.09s}
.stagger-in > *:nth-child(4){animation-delay:.12s}
.stagger-in > *:nth-child(5){animation-delay:.15s}
.stagger-in > *:nth-child(6){animation-delay:.18s}
.stagger-in > *:nth-child(7){animation-delay:.21s}
.stagger-in > *:nth-child(8){animation-delay:.24s}
.stagger-in > *:nth-child(9){animation-delay:.27s}
.stagger-in > *:nth-child(10){animation-delay:.30s}
.stagger-in > *:nth-child(n+11){animation-delay:.33s}

/* ── Skeleton Loading ── */
.skeleton{
  position:relative;overflow:hidden;
  background:var(--surface-2);border-radius:var(--radius-xs);
  color:transparent !important;
}
.skeleton *{visibility:hidden}
.skeleton::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  background-size:200% 100%;
  animation:shimmer 1.5s ease-in-out infinite;
}
.skeleton-text{height:14px;border-radius:6px;margin-bottom:8px}
.skeleton-text.short{width:60%}
.skeleton-text.medium{width:80%}
.skeleton-heading{height:22px;width:40%;border-radius:8px;margin-bottom:12px}
.skeleton-card{height:160px;border-radius:var(--radius)}
.skeleton-avatar{width:34px;height:34px;border-radius:50%}
.skeleton-stat{height:80px;border-radius:var(--radius)}

/* ═══════════════════════════════════════════
   APP SIDEBAR (vertical icon nav)
   ═══════════════════════════════════════════ */
.navbar{display:none} /* Legacy — hidden, replaced by sidebar */

.app-sidebar{
  position:fixed;left:0;top:0;bottom:0;z-index:100;
  width:60px;
  background:var(--bg);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  align-items:center;
  padding:16px 0 12px;
}
.app-sidebar-logo{
  width:32px;height:32px;margin-bottom:20px;
  cursor:pointer;flex-shrink:0;
}
.app-sidebar-logo img{width:100%;height:100%;object-fit:contain}

.app-sidebar-nav{
  display:flex;flex-direction:column;
  align-items:center;gap:4px;
  flex:1;
}
.app-sidebar-item{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-faint);cursor:pointer;
  transition:all .2s var(--ease-smooth);
  text-decoration:none;position:relative;
  border:none;background:none;
}
.app-sidebar-item svg{width:20px;height:20px}
.app-sidebar-item:hover{
  color:var(--ink);background:var(--surface-2);
}
.app-sidebar-item:active{transform:scale(.9);transition-duration:.08s}
.app-sidebar-item.active{
  color:var(--ink);background:var(--surface-2);
}

/* Tooltip */
.app-sidebar-item::after{
  content:attr(data-tooltip);
  position:absolute;left:calc(100% + 10px);top:50%;
  transform:translateY(-50%) translateX(-4px);
  background:rgba(20,20,20,.95);color:#e5e5e5;
  font-size:12px;font-weight:500;font-family:'Inter',sans-serif;
  padding:5px 10px;border-radius:6px;white-space:nowrap;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:all .15s var(--ease-out);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-md);z-index:200;
}
.app-sidebar-item:hover::after{
  opacity:1;visibility:visible;
  transform:translateY(-50%) translateX(0);
}

.app-sidebar-bottom{
  margin-top:auto;
  display:flex;flex-direction:column;
  align-items:center;gap:4px;
  padding-top:8px;
  border-top:1px solid var(--border);
  width:100%;
}
.app-sidebar-avatar{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.08);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.1);
  transition:all .2s var(--ease-smooth);
  position:relative;
}
.app-sidebar-avatar:hover{
  border-color:rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);
}

/* Avatar dropdown (opens right) */
.app-sidebar-dropdown{
  position:absolute;left:calc(100% + 10px);bottom:0;min-width:200px;
  background:rgba(20,20,20,.96);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  padding:6px;
  opacity:0;visibility:hidden;transform:translateX(-6px) scale(0.97);
  transition:all .2s var(--ease-out);z-index:200;
}
.app-sidebar-dropdown.open{
  opacity:1;visibility:visible;
  transform:translateX(0) scale(1);
}
.nav-dropdown-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--radius-xs);
  font-size:13px;color:var(--ink-soft);font-weight:500;
  cursor:pointer;transition:all .15s var(--ease-smooth);
}
.nav-dropdown-item svg{width:15px;height:15px;flex-shrink:0}
.nav-dropdown-item:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.nav-dropdown-item:active{transform:scale(0.97);transition-duration:.06s}
.nav-dropdown-item.danger{color:var(--error)}
.nav-dropdown-item.danger:hover{background:var(--error-soft)}
.nav-dropdown-divider{height:1px;background:var(--border);margin:4px 8px}

/* Content area — everything shifts right */
.app-content{margin-left:60px;min-height:100vh;position:relative;z-index:1;flex:1;display:flex;flex-direction:column;width:calc(100% - 60px)}


/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border:none;border-radius:100px;
  background:#ffffff;color:#0a0a0a;font-family:'Inter',sans-serif;
  font-size:15px;font-weight:600;letter-spacing:0.3px;
  cursor:pointer;transition:all .25s var(--ease-out);
  text-decoration:none;position:relative;overflow:hidden;
}
.btn-primary:hover{
  background:#e0e0e0;
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(0,0,0,0.12);
}
.btn-primary:active{
  transform:translateY(0) scale(0.97);
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.15);
  transition-duration:.1s;
}
.btn-primary:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary.full{width:100%}

.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.12);color:var(--ink);
  padding:10px 20px;border-radius:100px;font-size:13px;font-weight:500;
  cursor:pointer;transition:all .2s var(--ease-out);font-family:'Inter',sans-serif;
  text-decoration:none;
}
.btn-secondary:hover{
  border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08);
  transform:translateY(-1px);
}
.btn-secondary:active{transform:translateY(0) scale(0.96);transition-duration:.1s;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2)}

.btn-sm{padding:8px 18px;font-size:12px}
.btn-danger{border-color:var(--error);color:var(--error)}
.btn-danger:hover{background:var(--error-soft);border-color:var(--error)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;color:var(--ink-muted);
  font-size:13px;font-weight:500;cursor:pointer;
  padding:8px 12px;border-radius:var(--radius-xs);
  transition:all .15s var(--ease-smooth);font-family:'Inter',sans-serif;
}
.btn-ghost:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.btn-ghost:active{transform:scale(0.96);transition-duration:.08s}

/* ═══════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════ */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;
  transition:all .3s var(--ease-out);
}
.card:hover{
  border-color:var(--border-strong);
  box-shadow:var(--shadow-sm);
  background:var(--surface-2);
}
.card-interactive:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  background:var(--surface);
}
.card-interactive:active{
  transform:translateY(0) scale(0.98);transition-duration:.1s;
  box-shadow:var(--shadow-sm);
}

/* ═══════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════ */
.form-group{margin-bottom:20px}
.form-label{
  display:block;font-size:13px;font-weight:600;color:var(--ink-soft);
  margin-bottom:6px;letter-spacing:0.2px;
  transition:color .2s var(--ease-smooth);
}
.form-input{
  width:100%;padding:12px 16px;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);font-family:'Inter',sans-serif;font-size:14px;
  color:var(--ink);background:rgba(255,255,255,.04);
  transition:all .25s var(--ease-out);outline:none;
}
.form-input:hover{border-color:rgba(255,255,255,.18)}
.form-input:focus{
  border-color:rgba(255,255,255,.3);
  box-shadow:0 0 0 3px rgba(99,102,241,0.12),0 0 0 1px rgba(255,255,255,.08);
}
.form-input::placeholder{color:var(--ink-faint);transition:opacity var(--transition-fast)}
.form-input:focus::placeholder{opacity:.4}
.form-group:focus-within .form-label{color:var(--ink)}
.form-input.error{border-color:var(--error);box-shadow:0 0 0 3px rgba(239,68,68,0.08)}
.form-error{
  font-size:12px;color:var(--error);margin-top:4px;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .25s var(--ease-out),opacity .25s var(--ease-out),margin .25s var(--ease-out);
}
.form-error.show{
  max-height:40px;opacity:1;margin-top:4px;
  animation:fadeInDown .2s var(--ease-out);
}
.form-hint{font-size:12px;color:var(--ink-muted);margin-top:4px}

select.form-input{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23e5e5e5' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}
select.form-input option{background:#1a1a1a;color:#e5e5e5}

textarea.form-input{resize:vertical;min-height:80px;line-height:1.5}

/* ── Section Label ── */
.section-label{
  font-family:'Inter',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-muted);
  margin-bottom:16px;
}

/* ═══════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════ */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;letter-spacing:0.3px;
  padding:4px 10px;border-radius:100px;
  transition:all .2s;
}
.badge.success{background:var(--success-soft);color:#4ade80}
.badge.warning{background:var(--warning-soft);color:#fbbf24}
.badge.error{background:var(--error-soft);color:#ef4444}
.badge.neutral{background:var(--surface-2);color:var(--ink-muted)}
.badge.accent{background:var(--accent-soft);color:var(--accent)}
.badge:hover{transform:scale(1.04)}
.badge:active{transform:scale(0.96);transition-duration:.08s}

/* ═══════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════ */
.stat-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px 24px;
  transition:all .3s var(--ease-out);
}
.stat-card:hover{
  border-color:var(--border-strong);
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}
.stat-card:active{transform:translateY(0) scale(0.98);transition-duration:.08s}
.stat-value{
  font-family:'Poppins',sans-serif;font-size:28px;font-weight:700;
  color:var(--ink);margin-bottom:2px;
  animation:countUp .4s var(--ease-out) both;
}
.stat-label{font-size:12px;color:var(--ink-muted);font-weight:500}

/* ═══════════════════════════════════════════
   AUTH PAGES
   ═══════════════════════════════════════════ */
.auth-page{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:40px 24px;
  background:transparent;
}
.auth-container{width:100%;max-width:420px}
.auth-card{
  background:rgba(20,20,20,.9);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:40px 36px;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  animation:scaleIn .4s var(--ease-out) both;
}
.auth-logo{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-bottom:32px;animation:fadeInDown .5s var(--ease-out) both;
}
.auth-logo img{height:32px;width:auto}
.auth-logo span{font-family:'Poppins',sans-serif;font-weight:700;font-size:20px}
.auth-title{font-size:22px;text-align:center;margin-bottom:8px}
.auth-subtitle{text-align:center;color:var(--ink-muted);font-size:14px;margin-bottom:28px}
.auth-footer{text-align:center;margin-top:24px;font-size:13px;color:var(--ink-muted)}
.auth-footer a{
  color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;
  transition:color .2s var(--ease-out),text-decoration-color .2s var(--ease-out);
}
.auth-footer a:hover{color:var(--ink-hover)}
.auth-divider{
  display:flex;align-items:center;gap:16px;margin:24px 0;
  font-size:12px;color:var(--ink-faint);
}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* ═══════════════════════════════════════════
   PLAN CARDS (kept for compatibility)
   ═══════════════════════════════════════════ */
.plans-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.plan-card{
  border:2px solid var(--border);border-radius:var(--radius);
  padding:24px;cursor:pointer;transition:all .25s var(--ease-out);position:relative;
}
.plan-card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.plan-card:active{transform:translateY(0) scale(0.98);transition-duration:.1s}
.plan-card.selected{border-color:var(--ink);background:var(--surface-2)}
.plan-card.popular::before{
  content:'Popular';position:absolute;top:-10px;right:16px;
  background:#e5e5e5;color:#0a0a0a;font-size:10px;font-weight:600;
  padding:3px 10px;border-radius:100px;letter-spacing:0.5px;text-transform:uppercase;
}
.plan-name{font-family:'Poppins',sans-serif;font-size:16px;font-weight:700;margin-bottom:4px}
.plan-price{font-family:'Poppins',sans-serif;font-size:28px;font-weight:800;margin-bottom:12px}
.plan-price small{font-size:14px;font-weight:400;color:var(--ink-muted)}
.plan-features{list-style:none;padding:0}
.plan-features li{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--ink-soft);padding:4px 0;
}
.plan-features li::before{content:'\2713';color:var(--success);font-weight:700;font-size:14px}

/* ═══════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════ */
.toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(80px) scale(0.9);
  background:rgba(30,30,30,.95);color:#e5e5e5;
  padding:14px 28px;border-radius:100px;font-size:13px;font-weight:500;
  z-index:300;pointer-events:none;
  transition:all .4s var(--ease-spring);
  box-shadow:var(--shadow-xl);
  max-width:90vw;text-align:center;
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.toast::before{margin-right:6px}
.toast.show{
  transform:translateX(-50%) translateY(0) scale(1);
  pointer-events:auto;
}
.toast.show.hiding{
  transform:translateX(-50%) translateY(12px) scale(0.95);
  opacity:0;
  transition:all .35s var(--ease-smooth);
  pointer-events:none;
}
.toast.error{background:var(--error);color:#fff;border-color:transparent}
.toast.success{background:var(--success);color:#fff;border-color:transparent}

/* ═══════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,0.25);
  backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;visibility:hidden;
  transition:all .3s var(--ease-smooth);
}
.modal-overlay.open{opacity:1;visibility:visible}
.modal-content{
  background:rgba(20,20,20,.98);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  box-shadow:var(--shadow-xl);
  width:100%;max-width:480px;max-height:85vh;
  overflow-y:auto;
  transform:scale(0.95) translateY(12px);
  transition:transform .3s var(--ease-out);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.modal-overlay.open .modal-content{transform:scale(1) translateY(0)}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 28px 0;
}
.modal-header h3{font-size:18px}
.modal-close{
  width:36px;height:36px;border-radius:50%;border:none;
  background:rgba(255,255,255,.08);color:var(--ink-muted);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:18px;transition:all .15s var(--ease-smooth);
}
.modal-close:hover{background:rgba(255,255,255,.14);color:var(--ink)}
.modal-close:active{transform:scale(0.88);transition-duration:.08s}
.modal-body{padding:20px 28px 28px}

/* ═══════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════ */
.progress-bar{
  height:6px;background:var(--surface-2);border-radius:100px;
  overflow:hidden;
}
.progress-fill{
  height:100%;background:var(--ink);border-radius:100px;
  width:100%;transform-origin:left;transform:scaleX(0);
  transition:transform .5s var(--ease-out);
  position:relative;
}
.progress-fill::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  animation:shimmer 2s ease-in-out infinite;
  background-size:200% 100%;
}

/* ═══════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════ */
.table-container{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:var(--radius);
}
table{width:100%;border-collapse:collapse}
th{
  font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-muted);
  padding:12px 16px;text-align:left;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;
}
td{
  padding:12px 16px;font-size:13px;
  border-bottom:1px solid var(--border);
  transition:background .2s var(--ease-smooth);
}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.03)}

/* ═══════════════════════════════════════════
   TABS / FILTER PILLS
   ═══════════════════════════════════════════ */
.tab-bar{
  display:flex;gap:4px;padding:4px;
  background:var(--surface-2);border-radius:100px;
  border:1px solid var(--border);
  width:fit-content;
}
.tab-btn{
  padding:8px 18px;border-radius:100px;border:none;
  background:transparent;color:var(--ink-muted);
  font-size:12px;font-weight:600;cursor:pointer;
  transition:all .2s var(--ease-smooth),background .25s var(--ease-out),color .15s var(--ease-smooth);
  font-family:'Inter',sans-serif;
}
.tab-btn:hover{color:var(--ink)}
.tab-btn:active{transform:scale(0.95);transition-duration:.08s}
.tab-btn.active{
  background:rgba(255,255,255,.12);color:var(--ink);
  box-shadow:var(--shadow-sm);
}

/* ═══════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════ */
.empty-state{
  text-align:center;padding:60px 24px;color:var(--ink-muted);
  animation:fadeIn .4s var(--ease-out);
}
.empty-state .empty-icon{
  font-size:32px;margin:0 auto 16px;opacity:.4;
  width:64px;height:64px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border-radius:50%;border:1px solid var(--border);
}
.empty-state h3{margin-bottom:8px;color:var(--ink);font-size:16px}
.empty-state p{font-size:14px;max-width:300px;margin:0 auto}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.footer{
  text-align:center;padding:32px 24px 24px;color:var(--ink-faint);
  font-size:12px;letter-spacing:0.5px;font-weight:400;
  border-top:1px solid var(--border);margin-top:auto;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.footer-tagline{
  color:var(--ink-muted);font-size:12px;letter-spacing:0.4px;
}
.footer-tagline a{
  color:var(--ink-muted);text-decoration:none;font-weight:600;
  transition:color .25s var(--ease-out);
}
.footer-tagline a:hover{color:var(--ink)}
.footer-powered{
  display:flex;align-items:center;gap:10px;color:var(--ink-faint);font-size:11px;letter-spacing:0.3px;
}
.footer-powered > span{color:var(--ink-faint);font-weight:400}
.footer-powered a{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--ink-muted);text-decoration:none;font-weight:500;font-size:11px;
  transition:color .2s var(--ease-out);
}
.footer-powered a:hover{color:var(--ink)}
.footer-powered svg:not(.footer-sep){opacity:.5;transition:opacity .2s}
.footer-powered a:hover svg{opacity:1}
.footer-sep{color:var(--ink-faint);opacity:.3}
.footer-socials{
  display:flex;gap:16px;align-items:center;
}
.footer-socials a{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:8px;
  color:var(--ink-faint);text-decoration:none;
  transition:color .25s var(--ease-out), background .25s var(--ease-out);
}
.footer-socials a:hover{
  color:var(--ink);background:var(--surface-2);
}
.footer-socials a:active{transform:scale(0.9);transition-duration:.08s}
.footer-socials svg{width:16px;height:16px}

/* ═══════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════ */
.hidden{display:none!important}
.text-center{text-align:center}
.text-muted{color:var(--ink-muted)}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.gap-8{gap:8px}.gap-16{gap:16px}
.flex{display:flex}.flex-col{flex-direction:column}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ═══════════════════════════════════════════
   LOADING
   ═══════════════════════════════════════════ */
.spinner{
  width:20px;height:20px;border:2.5px solid var(--border);
  border-top-color:var(--ink);border-radius:50%;animation:spin 0.8s linear infinite;
}
.spinner.white{border-color:rgba(255,255,255,0.15);border-top-color:#e5e5e5}
.spinner.lg{width:32px;height:32px;border-width:3px}

.btn-loading{position:relative;color:transparent!important;pointer-events:none}
.btn-loading::after{
  content:'';position:absolute;inset:0;margin:auto;
  width:18px;height:18px;border:2px solid rgba(0,0,0,0.2);
  border-top-color:#0a0a0a;border-radius:50%;animation:spin .8s linear infinite;
}

.page-loading{
  display:flex;align-items:center;justify-content:center;
  flex:1;padding:60px 24px;
}
.page-loading .spinner{width:28px;height:28px;border-width:3px}

/* ═══════════════════════════════════════════
   PAGE CONTAINER
   ═══════════════════════════════════════════ */
.page-container{flex:1;width:100%;padding:32px 32px 60px;max-width:100%}
.page-container.wide{max-width:100%}

/* ── Broken Image Fallback ── */
.img-broken{
  display:flex!important;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);color:var(--ink-faint);
  min-height:120px;aspect-ratio:1;
}
.img-broken svg{opacity:.4}

/* ═══════════════════════════════════════════
   MOBILE BOTTOM NAV (hidden by default)
   ═══════════════════════════════════════════ */
.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;height:56px;z-index:100;background:rgba(10,10,10,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);display:none;align-items:center;justify-content:space-around;padding:0 4px;padding-bottom:env(safe-area-inset-bottom,0)}
.mobile-bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 0;min-width:48px;min-height:48px;text-decoration:none;color:var(--ink-faint);transition:color .15s;-webkit-tap-highlight-color:transparent;border:none;background:none;cursor:pointer;font-family:inherit}
.mobile-bottom-nav-item.active{color:var(--ink)}
.mobile-bottom-nav-item svg{width:20px;height:20px}
.mobile-bottom-nav-item span{font-size:10px;font-weight:500;letter-spacing:.2px}
.mobile-more-overlay{position:fixed;inset:0;z-index:199;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .25s ease}
.mobile-more-overlay.open{opacity:1;visibility:visible}
.mobile-more-sheet{position:fixed;bottom:0;left:0;right:0;z-index:200;background:rgba(18,18,18,.98);border-top-left-radius:20px;border-top-right-radius:20px;border:1px solid var(--border);border-bottom:none;padding:8px 0 16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0));transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1)}
.mobile-more-sheet.open{transform:translateY(0)}
.mobile-more-handle{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.2);margin:4px auto 12px}
.mobile-more-user{padding:12px 20px;font-size:13px;color:var(--ink-soft)}
.mobile-more-user small{display:block;font-size:11px;color:var(--ink-faint);margin-top:2px}
.mobile-more-divider{height:1px;background:var(--border);margin:4px 16px}
.mobile-more-item{display:flex;align-items:center;gap:12px;padding:12px 20px;min-height:48px;color:var(--ink-muted);text-decoration:none;font-size:14px;font-weight:500;transition:background .15s;-webkit-tap-highlight-color:transparent;border:none;background:none;width:100%;cursor:pointer;font-family:inherit}
.mobile-more-item:active{background:rgba(255,255,255,.04)}
.mobile-more-item svg{width:18px;height:18px;flex-shrink:0}
.mobile-more-item.danger{color:#ef4444}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media(max-width:768px){
  .app-sidebar{display:none !important}
  .mobile-bottom-nav{display:flex}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0))}
  .app-content{margin-left:0;width:100%}
  .page-container{padding:20px 16px 72px}
  .toast{bottom:72px}
  h1{font-size:24px}
  h2{font-size:20px}
  .plans-grid{grid-template-columns:1fr}
  .auth-card{padding:28px 24px;border-radius:var(--radius)}
  .auth-page{padding:24px 16px}
  .modal-content{border-radius:var(--radius);margin:16px}
  .tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:480px){
  .navbar{padding:0 12px}
  .nav-brand span{font-size:14px}
  .page-container{padding:20px 12px 32px}
  .auth-card{padding:24px 20px}
  .btn-primary{padding:12px 24px;font-size:14px}
  /* Prevent iOS auto-zoom on input focus */
  input,select,textarea{font-size:16px!important}
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════ */
.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

/* ═══════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════
   KC MODAL — shared dialog component
   Used by: studio.html (New Client), history.html (Bulk Move)
   ═══════════════════════════════════════════ */
.kc-modal-backdrop{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
  padding:20px;
}
.kc-modal-backdrop.active{opacity:1;pointer-events:auto}
.kc-modal{
  background:rgba(20,20,20,.98);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:28px 28px 24px;
  width:100%;max-width:440px;
  transform:scale(.96) translateY(6px);
  transition:transform .25s cubic-bezier(.16,1,.3,1);
  box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04);
}
.kc-modal-backdrop.active .kc-modal{transform:scale(1) translateY(0)}
.kc-modal-title{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 4px;letter-spacing:-.01em}
.kc-modal-sub{font-size:12px;color:var(--ink-muted);margin:0 0 22px}
.kc-modal-field{margin-bottom:16px}
.kc-modal-field label{display:block;font-size:11px;font-weight:600;color:var(--ink-muted);letter-spacing:.6px;text-transform:uppercase;margin-bottom:7px}
.kc-modal-field input,.kc-modal-field select{
  width:100%;padding:11px 14px;
  background:rgba(255,255,255,.04);
  border:1.5px solid var(--border);
  border-radius:10px;
  color:var(--ink);font-size:14px;font-family:'Inter',sans-serif;
  transition:border-color .2s;
  box-sizing:border-box;
}
.kc-modal-field input:focus,.kc-modal-field select:focus{outline:none;border-color:rgba(255,255,255,.22)}
.kc-modal-colors{display:flex;gap:8px;flex-wrap:wrap}
.kc-modal-color{
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:all .15s;
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;
}
.kc-modal-color:hover{transform:scale(1.08)}
.kc-modal-color.active{border-color:rgba(255,255,255,.9);transform:scale(1.08)}
.kc-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.kc-modal-btn{
  padding:10px 18px;border-radius:100px;
  font-size:13px;font-weight:600;font-family:'Inter',sans-serif;
  cursor:pointer;transition:all .15s;
  border:1.5px solid transparent;
}
.kc-modal-btn.secondary{background:transparent;color:var(--ink-muted);border-color:var(--border)}
.kc-modal-btn.secondary:hover{color:var(--ink);border-color:rgba(255,255,255,.2)}
.kc-modal-btn.primary{background:var(--ink);color:#0a0a0a}
.kc-modal-btn.primary:hover{opacity:.9;transform:translateY(-1px)}
.kc-modal-btn.primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.kc-modal-btn.primary.danger{background:#dc2626;color:#fff;border-color:#dc2626}
.kc-modal-btn.primary.danger:hover{background:#b91c1c;opacity:1}
.kc-modal-error{color:#f87171;font-size:12px;margin-top:10px;min-height:16px}

/* "+ New client" / create-action option pattern in any custom select dropdown */
.ks-select-option[data-value="__create__"]{
  font-weight:700;color:#1a1a1a;
  border-bottom:1px solid rgba(0,0,0,.08);
  border-radius:8px 8px 0 0;
  margin-bottom:4px;
  padding-bottom:11px;
}
.ks-select-option[data-value="__create__"]:hover{color:#000;background:rgba(0,0,0,.06)}

/* ═══════════════════════════════════════════
   MOBILE EXCELLENCE LAYER
   App-grade mobile experience — touch targets,
   bottom-sheet modals, active indicators, spacing.
   Applied at ≤768px (tablet portrait + phone).
   ═══════════════════════════════════════════ */
@media(max-width:768px){
  /* ── Touch targets (WCAG 2.5.5: 44×44 px min) ───────────
     Many action buttons across pages were 24-32px on mobile
     (audit pointed action-btn, h-action, filter-toggle,
     queue-remove). Bump them globally. */
  .action-btn,
  .h-action,
  .lb-action-btn{
    min-height:44px;
    padding-top:10px;padding-bottom:10px;
  }
  .filter-toggle,
  .tab-btn{
    min-height:40px;
    padding-top:9px;padding-bottom:9px;
  }
  /* Color picker chips were 26-28px — too small to tap accurately */
  .kc-modal-color,
  .color-chip{
    width:36px;height:36px;
  }
  /* Queue/remove circular buttons were 18-20px — bump to 32px hit area
     while keeping the visual size tight via inset (no layout shift) */
  .queue-remove,
  .icon-btn-sm{
    min-width:32px;min-height:32px;
  }

  /* ── Bottom-nav active indicator (top pill) ──────────────
     Audit noted no "you are here" feedback. Native pattern: a
     short pill at the very top of the active item. */
  .mobile-bottom-nav-item{position:relative}
  .mobile-bottom-nav-item.active::before{
    content:'';
    position:absolute;top:0;left:50%;
    transform:translateX(-50%);
    width:24px;height:3px;
    border-radius:0 0 3px 3px;
    background:var(--ink);
  }
  /* Bigger SVG on mobile bottom nav — easier to scan */
  .mobile-bottom-nav-item svg{width:22px;height:22px}
  .mobile-bottom-nav-item span{font-size:10px;font-weight:600}

  /* ── Page container leaves room for bottom nav + safe area ──
     Existing rule on body adds bottom padding, but pages with
     their own scroll containers (studio main, etc.) need extra. */
  .page-container{padding-bottom:96px}
}

/* ── Modal → Bottom Sheet on phone (≤640px) ─────────────
   Centered modals on a 375px screen feel like web, not app.
   Slide-up bottom sheet is THE native pattern. */
@media(max-width:640px){
  .kc-modal-backdrop{
    align-items:flex-end;
    padding:0;
  }
  .kc-modal{
    /* Override any inline max-width — sheet must fill width */
    max-width:100% !important;
    width:100%;
    border-radius:20px 20px 0 0;
    padding:14px 20px calc(20px + env(safe-area-inset-bottom,0));
    max-height:90vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    /* Slide up from bottom (start off-screen) */
    transform:translateY(100%);
    transition:transform .35s cubic-bezier(.32,.72,0,1);
    box-shadow:0 -8px 40px rgba(0,0,0,.45);
  }
  .kc-modal-backdrop.active .kc-modal{transform:translateY(0)}

  /* Drag-handle indicator at the top of the sheet */
  .kc-modal::before{
    content:'';
    display:block;
    width:40px;height:4px;
    border-radius:2px;
    background:rgba(255,255,255,.22);
    margin:0 auto 14px;
  }

  /* Sticky action footer — actions always reachable with thumb */
  .kc-modal-actions{
    position:sticky;
    bottom:-1px;
    margin:18px -20px calc(-20px - env(safe-area-inset-bottom,0));
    padding:14px 20px calc(14px + env(safe-area-inset-bottom,0));
    background:linear-gradient(to top,rgba(20,20,20,1) 70%,rgba(20,20,20,.85));
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--border);
    z-index:2;
    /* Stretch buttons full width */
    gap:8px;
  }
  .kc-modal-btn{
    min-height:48px;
    font-size:14px;
    padding:12px 18px;
    flex:1;
  }
  /* Title sits a bit tighter on a sheet */
  .kc-modal-title{font-size:17px;margin-bottom:2px}
  .kc-modal-sub{font-size:12px;margin-bottom:18px}
}

/* ── Reduce motion: bottom sheet still slides but faster ── */
@media(prefers-reduced-motion:reduce){
  .kc-modal{transition-duration:.01ms !important}
}

/* ═══════════════════════════════════════════
   APPLE-GRADE MOTION LAYER
   View Transitions API + spring polish.
   Activated where supported; gracefully degrades.
   ═══════════════════════════════════════════ */

/* ── 1. Cross-document View Transitions ───────────────────
   On Chrome 126+ / Safari 18+, this single rule enables a
   silky crossfade between every same-origin navigation —
   pages snapshot themselves and the browser tweens between
   them. No JS needed. Other browsers ignore this rule and
   keep the existing pageIn animation. */
@view-transition{ navigation:auto; }

/* Tune the default crossfade — slightly slower + custom curve
   for that "premium" feel. The browser auto-applies these to
   the root snapshot during navigation. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.28s;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
}
::view-transition-old(root){
  animation-name:keouViewExit;
}
::view-transition-new(root){
  animation-name:keouViewEnter;
}
@keyframes keouViewExit{
  to{opacity:0}
}
@keyframes keouViewEnter{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

/* When View Transitions are supported, the new page already
   snapshots in via the rule above — disable the old pageIn
   keyframe to avoid running two entrance animations on top
   of each other. Browsers without VT keep pageIn untouched. */
@supports (view-transition-name:none){
  .page-container,.app-content{animation:none}
}

/* ── 2. Bottom-nav active pill — spring transition ───────
   The pill above the active item used to snap. Animate its
   width/transform so it glides between items on tap. */
.mobile-bottom-nav-item::before{
  content:'';
  position:absolute;top:0;left:50%;
  transform:translateX(-50%) scaleX(0);
  width:24px;height:3px;
  border-radius:0 0 3px 3px;
  background:var(--ink);
  transform-origin:center top;
  transition:transform .35s var(--ease-spring),opacity .2s var(--ease-smooth);
  opacity:0;
}
.mobile-bottom-nav-item.active::before{
  transform:translateX(-50%) scaleX(1);
  opacity:1;
}
/* Subtle SVG bounce on the active item — feels alive, not static */
.mobile-bottom-nav-item svg{transition:transform .25s var(--ease-spring)}
.mobile-bottom-nav-item.active svg{transform:translateY(-1px)}
.mobile-bottom-nav-item:active svg{transform:scale(.88)}

/* ── 3. Tab content crossfade ─────────────────────────────
   Pages with tabs (project.html, share.html, etc.) toggle
   sections via display:none/block. Wrap with .tab-pane to
   get a subtle fade-up on activation. */
.tab-pane{animation:fadeInUp .32s var(--ease-out) both}

/* ── 4. Form input border glow — uses the orphan keyframe ──
   When users tap into a field, a quiet pulse signals "ready".
   Two cycles only — no perpetual motion. */
.form-input:focus,
.kc-modal-field input:focus,
.kc-modal-field select:focus,
.kc-modal-field textarea:focus,
textarea:focus{
  animation:borderGlow 1.4s var(--ease-smooth) 0s 2;
}

/* ── 5. Anchor exit micro-animation (fallback) ─────────────
   For browsers without View Transitions, link clicks set
   data-leaving on <html> via a tiny script in nav.js. The
   page fades down briefly before the browser navigates —
   this gives the "anticipation" feel even without VT. */
html[data-leaving="1"] .page-container,
html[data-leaving="1"] .app-content,
html[data-leaving="1"] .main{
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .18s var(--ease-smooth),transform .18s var(--ease-smooth);
}

/* ── 6. List item enter — one-off applied via .item-enter ──
   For new items inserted dynamically (e.g. a feedback comment
   posted) we want a clean slide-in instead of a pop. */
.item-enter{
  animation:fadeInUp .35s var(--ease-out) both;
}

/* ── 7. Card hover lift — softer easing ──────────────────── */
.card-interactive,
.project-card,
.history-item,
.fb-card,
.result-card{
  transition:transform .28s var(--ease-out),
             border-color .2s var(--ease-smooth),
             box-shadow .28s var(--ease-out),
             background .2s var(--ease-smooth);
}

/* ── 8. Reduced motion respect ─────────────────────────────
   Kill everything from this layer on reduced motion. */
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none !important}
  .mobile-bottom-nav-item::before{transition:none !important}
  .mobile-bottom-nav-item svg{transition:none !important}
  .form-input:focus,
  .kc-modal-field input:focus,
  textarea:focus{animation:none !important}
  html[data-leaving="1"] .page-container,
  html[data-leaving="1"] .app-content,
  html[data-leaving="1"] .main{
    transition:none !important;opacity:1;transform:none;
  }
}

/* ═══════════════════════════════════════════
   FEEDBACK NOTIFICATIONS BELL
   - Sidebar bell + badge (desktop)
   - Mobile More badge + Notifications item
   - Floating panel that lists recent client feedback
   ═══════════════════════════════════════════ */

/* Mobile: dot on the More button (bottom nav) when there's unread —
   redundant with the FAB but kept as a secondary signal in case the
   user is focused on the bottom nav. */
.mobile-more-badge{
  position:absolute;top:8px;right:18px;
  width:8px;height:8px;border-radius:50%;
  background:#ef4444;
  box-shadow:0 0 0 2px rgba(10,10,10,.95);
}

/* Mobile: notification count pill inside the More sheet item */
.mobile-more-bell-count{
  background:#ef4444;color:#fff;
  font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:10px;min-width:20px;
  text-align:center;
}

/* ── Notifications FAB ───────────────────────────────────────
   Linear/Notion/Vercel pattern : the bell is a contextual trigger
   pinned to the top-right of the viewport, always visible regardless
   of the page or scroll position. 44×44 round, glassmorphism. */
.notif-fab{
  position:fixed;top:14px;right:14px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(20,20,20,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);
  color:var(--ink-soft);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04);
  z-index:90;
  transition:transform .18s var(--ease-spring),
             background .15s var(--ease-smooth),
             border-color .15s var(--ease-smooth);
  -webkit-tap-highlight-color:transparent;
}
.notif-fab svg{width:20px;height:20px}
.notif-fab:hover{
  background:rgba(30,30,30,.92);
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}
.notif-fab:active{transform:scale(.92);background:rgba(40,40,40,.9)}
.notif-fab-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:10px;
  background:#ef4444;color:#fff;
  font-size:10px;font-weight:700;line-height:18px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);
  box-shadow:0 1px 4px rgba(239,68,68,.5);
  animation:pulse 2.4s var(--ease-smooth) infinite;
}
/* Slightly larger top-offset on mobile to clear the iOS status bar / notch */
@media(max-width:640px){
  .notif-fab{top:max(14px, env(safe-area-inset-top, 0px))}
}

/* ── Notifications panel ──────────────────────────────────
   Desktop: fixed panel sliding from sidebar (left:70px).
   Mobile: bottom sheet sliding from bottom. */
.notif-panel-overlay{
  position:fixed;inset:0;z-index:1099;
  background:rgba(0,0,0,.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease-smooth);
}
.notif-panel-overlay.open{opacity:1;pointer-events:auto}

.notif-panel{
  /* Anchored top-right, slides down from below the FAB */
  position:fixed;top:68px;right:14px;
  width:380px;max-width:calc(100vw - 28px);
  max-height:min(540px,calc(100vh - 84px));
  background:rgba(20,20,20,.98);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04);
  display:flex;flex-direction:column;
  z-index:1100;
  opacity:0;visibility:hidden;
  transform-origin:top right;
  transform:translateY(-8px) scale(.97);
  transition:opacity .22s var(--ease-out),
             transform .28s var(--ease-out),
             visibility .28s linear;
}
.notif-panel.open{
  opacity:1;visibility:visible;
  transform:translateY(0) scale(1);
}
.notif-panel-handle{display:none}

.notif-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px 12px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.notif-panel-head h3{
  margin:0;font-size:14px;font-weight:700;color:var(--ink);
  font-family:'Inter',sans-serif;letter-spacing:-.01em;
}
.notif-panel-close{
  background:transparent;border:none;cursor:pointer;
  width:32px;height:32px;border-radius:8px;
  color:var(--ink-muted);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s var(--ease-smooth),color .15s var(--ease-smooth);
}
.notif-panel-close:hover{background:var(--surface-2);color:var(--ink)}
.notif-panel-close svg{width:16px;height:16px}

.notif-panel-list{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  flex:1;
  padding:6px;
}
.notif-panel-list::-webkit-scrollbar{width:6px}
.notif-panel-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}

/* Wrapper holds the main click area + the inline resolve action */
.notif-item{
  display:flex;align-items:stretch;gap:0;width:100%;
  border-radius:12px;
  transition:background .15s var(--ease-smooth);
  position:relative;
}
.notif-item:hover{background:rgba(255,255,255,.04)}
.notif-item.unread{background:rgba(99,102,241,.06)}
.notif-item.unread:hover{background:rgba(99,102,241,.10)}

/* The main click zone — opens the lightbox */
.notif-item-main{
  flex:1;min-width:0;
  display:flex;align-items:flex-start;gap:12px;
  padding:12px;
  background:transparent;border:none;cursor:pointer;
  text-align:left;color:inherit;font-family:inherit;
  border-radius:12px 0 0 12px;
}
.notif-item-main:active{transform:scale(.99);transition-duration:.06s}
.notif-item:not(.unread) .notif-item-main{border-radius:12px}

/* Inline "Mark resolved" check button */
.notif-item-resolve{
  flex:0 0 44px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;cursor:pointer;
  color:var(--ink-muted);
  border-left:1px solid var(--border);
  border-radius:0 12px 12px 0;
  transition:background .15s var(--ease-smooth),color .15s var(--ease-smooth);
  -webkit-tap-highlight-color:transparent;
}
.notif-item-resolve svg{width:16px;height:16px}
.notif-item-resolve:hover{background:rgba(16,185,129,.12);color:#10b981}
.notif-item-resolve:active{transform:scale(.92);transition-duration:.06s}
.notif-item-resolve:disabled{cursor:not-allowed}

.notif-item-thumb{
  width:48px;height:48px;border-radius:8px;
  background:var(--surface-2);overflow:hidden;flex-shrink:0;
  border:1px solid var(--border);
}
.notif-item-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.notif-item-thumb-empty{
  background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%);
}

.notif-item-body{flex:1;min-width:0}
.notif-item-head{
  display:flex;align-items:center;gap:8px;margin-bottom:2px;
  font-size:11px;
}
.notif-item-type{font-weight:700;letter-spacing:.2px}
.notif-item-time{margin-left:auto;color:var(--ink-faint);font-size:10px;flex-shrink:0}
.notif-item-dot{
  width:7px;height:7px;border-radius:50%;
  background:#6366f1;flex-shrink:0;
}
.notif-item-meta{
  font-size:12px;color:var(--ink-soft);margin-bottom:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.notif-item-meta strong{color:var(--ink);font-weight:600}
.notif-item-comment{
  font-size:12px;color:var(--ink-muted);
  line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* ── Mobile: notif panel = bottom sheet ─────────────────── */
@media(max-width:640px){
  .notif-panel{
    /* Reset desktop top-right anchoring — mobile uses bottom sheet */
    top:auto;left:0;right:0;bottom:0;
    width:100%;max-width:100%;
    border-radius:20px 20px 0 0;
    max-height:80vh;
    transform:translateY(100%);
    transform-origin:bottom center;
    transition:transform .35s cubic-bezier(.32,.72,0,1),visibility .35s linear;
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .notif-panel.open{transform:translateY(0)}
  .notif-panel-handle{
    display:block;
    width:40px;height:4px;border-radius:2px;
    background:rgba(255,255,255,.22);
    margin:10px auto 0;
  }
  .notif-panel-head{padding:10px 18px 12px}
  .notif-item{padding:14px 12px}
  .notif-item-thumb{width:52px;height:52px}
  .notif-item-meta{font-size:13px}
  .notif-item-comment{font-size:13px;-webkit-line-clamp:3}
}

@media(prefers-reduced-motion:reduce){
  .notif-fab-badge{animation:none !important}
  .notif-panel{transition-duration:.01ms !important}
}