/*
 * Browns Digital — dashboard-EDITABLE.css
 * Upload to: dashboard.brownsdigital.org/assets/index-a66fcefb.css
 * Then hard-refresh: Cmd+Shift+R (Mac) / Ctrl+Shift+R (Win)
 *
 * KEY SECTIONS — search with Ctrl+F:
 *   .nav-fixed            top navbar
 *   .panel-overlay        dim behind project panel
 *   .project-panel        the 680px sliding panel
 *   .panel-top            panel header row
 *   .panel-body           panel scrollable area
 *   .lightbox-overlay     full-screen image viewer
 *   .lightbox-inner       image viewer layout container
 *   .lightbox-img         the image element
 *   .lightbox-close       X close button
 *   .lightbox-footer      filename + download bar
 *   .liquid               frosted glass card style
 *   @media (width<=768px) ALL mobile overrides (search this to find them)
 *   html.dark-mode        dark mode overrides
 */

 html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.panel-overlay,
.project-panel-overlay {
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100vh;

  left: 0;
  right: 0;

  padding: 90px 20px 20px 20px;
}

.close-btn {
  cursor:pointer;
  background:#00000014;
  border-radius:999px;
  justify-content:center;
  align-items:center;
  width:36px;
  height:36px;
  font-size:16px;
  transition:all .2s;
  display:flex;
  position:relative;
  top:-2px
}

.close-btn:hover {
  background:#00000026;
  transform:scale(1.05)
}

.invoice-create-card {
  background:#ffffffbf;
  border:1px solid #ffffffe6;
  border-radius:16px;
  grid-template-columns:1fr 1fr 1fr auto;
  gap:10px;
  padding:14px;
  display:grid;
  box-shadow:0 20px 50px #0f172a1a
}

.chat-composer input {
  border-radius:999px;
  flex:1;
  height:44px;
  padding:0 14px
}

.chat-send-btn {
  color:#fff;
  background:#111;
  border-radius:999px;
  justify-content:center;
  align-items:center;
  height:44px;
  padding:0 20px;
  font-size:13px;
  display:flex
}

.upload-file-btn {
  color:#fff;
  cursor:pointer;
  background:#111;
  border-radius:999px;
  justify-content:center;
  align-items:center;
  padding:12px 18px;
  font-size:13px;
  font-weight:500;
  transition:all .2s;
  display:inline-flex;
  box-shadow:0 10px 30px #0003
}

.upload-file-btn:hover {
  background:#000;
  transform:translateY(-2px)
}

.upload-file-btn input {
  display:none
}

.filter-chip {
  color:#6e6e73;
  cursor:pointer;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  background:#ffffff80;
  border:1px solid #fffc;
  border-radius:999px;
  padding:7px 14px;
  font-size:13px;
  transition:all .2s;
  box-shadow:0 8px 20px #0f172acc
}

.filter-chip:hover {
  color:#111;
  background:#ffffffbf
}

.filter-chip.active {
  color:#fff;
  background:#111;
  border:none;
  box-shadow:0 10px 25px #00000040
}

.empty-state {
  color:#4b5563;
  background:#ffffffb3;
  border:1px solid #ffffffe6;
  border-radius:20px;
  padding:28px 32px;
  font-size:15px;
  box-shadow:0 20px 60px #0f172a1f
}

.project-tile {
  cursor:pointer;
  background:#ffffffa6;
  border:1px solid #ffffffe6;
  border-radius:18px;
  padding:18px;
  box-shadow:0 20px 60px #0f172a1f
}

.project-tile:hover {
  transform:translateY(-6px)scale(1.02);
  box-shadow:0 30px 80px #0f172a33
}

.project-tile-header {
  justify-content:space-between;
  align-items:center;
  display:flex
}

.status-badge {
  text-transform:capitalize;
  border-radius:999px;
  padding:4px 10px;
  font-size:12px
}

.status-planning .status-badge {
  color:#7c8cff;
  background:#6464ff33
}

.status-in\ progress .status-badge {
  color:#ffb800;
  background:#ffb40033
}

.status-review .status-badge {
  color:#ff64c8;
  background:#ff64c833
}

.status-completed .status-badge {
  color:#00d084;
  background:#00ff9633
}

.project-header {
  border-radius:20px
}

.status-pill {
  color:#333;
  background:#0000000f;
  border-radius:999px;
  padding:6px 12px;
  font-size:12px
}

.update-box textarea.update-textarea {
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  resize:none;
  background:#fff9;
  border:1px solid #00000014;
  border-radius:14px;
  outline:none;
  width:100%;
  min-height:100px;
  padding:12px 14px;
  font-size:14px;
  transition:all .2s
}

.update-box textarea:focus {
  background:#ffffffe6;
  border-color:#0071e3;
  box-shadow:0 0 0 3px #0071e31a
}

.timeline-card {
  border-radius:14px;
  padding:14px;
  transition:all .2s
}

.timeline-card:hover {
  transform:translateY(-2px)
}

.project-panel-section {
  margin-bottom:28px
}

.create-project-card {
  max-width:600px;
  margin:0 auto
}

.input-group {
  flex-direction:column;
  gap:6px;
  display:flex
}

.input-group label {
  color:#6e6e73;
  font-size:12px;
  font-weight:500
}

.input-group input,.input-group textarea {
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:#111;
  background:#fff9;
  border:1px solid #00000014;
  border-radius:12px;
  outline:none;
  width:100%;
  padding:12px 14px;
  font-size:14px;
  transition:all .2s
}

.input-group input:focus,.input-group textarea:focus {
  background:#ffffffe6;
  border-color:#0071e3;
  box-shadow:0 0 0 3px #0071e31a
}

.input-group input::placeholder,.input-group textarea::placeholder {
  color:#9ca3af
}

.primary-btn {
  color:#fff;
  background:#111;
  border-radius:999px;
  padding:10px 18px;
  font-size:14px;
  font-weight:500;
  transition:all .2s
}

.primary-btn:hover {
  background:#000;
  transform:translateY(-1px)
}

.primary-btn:active {
  transform:scale(.98)
}

#panel-inner img {
  cursor:zoom-in
}

#panel-inner img:hover {
  filter:brightness(1.05);
  transform:scale(1.04)
}

#modal-img {
  object-fit:contain;
  cursor:default;
  pointer-events:none;
  z-index:1;
  max-width:100%;
  max-height:100%;

  object-fit: contain;

  position:relative;
   box-shadow: 0 40px 120px #00000080;
}

#image-modal:before {
  content:"";
  pointer-events:none;
  background:radial-gradient(circle,#0000 60%,#0009);
  position:absolute;
  inset:0
}

#image-modal {
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100dvh;

  z-index: 2147483647; /* 🔴 absolute top */

  display: flex;
  flex-direction: column;

  background: rgba(2, 6, 23, 0.96);

  overflow: hidden;
}

#prev-btn,
#next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  z-index: 10002;

  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: rgba(0,0,0,0.5);

  color: #fff;
}

#prev-btn { left: 16px; }
#next-btn { right: 16px; }

#image-wrapper {
  flex: 1;

  display: flex;
  align-items: center;
  align-items: flex-start !important;
  padding-top: 90px !important;

  justify-content: center;

  width: 100%;
  min-height: 0;   /* 🔴 CRITICAL */
  padding: 16px;

  overflow: hidden;
}

.project-select.error .project-selected {
  border-color:#dc262680;
  box-shadow:0 0 0 4px #dc262614
}

.panel-link {
  color:#2563eb;
  z-index:5;
  margin-top:-40px;
  font-weight:500;
  text-decoration:none;
  transition:opacity .2s;
  position:relative
}

.panel-link:hover {
  opacity:.7
}

:root {
  --muted:#6e6e73;
  --ease:cubic-bezier(.22,.61,.36,1)
}

body {
  background-color:#0000;
  background-image:radial-gradient(1400px 800px at 0 0,#fff 0%,#0000 55%),radial-gradient(1200px 800px at 100% 0,#edf0f8 0%,#0000 60%),radial-gradient(1200px 900px at 50% 120%,#e7eaf4 0%,#0000 65%),linear-gradient(#fafbff 0%,#f1f3f9 50%,#e9edf6 100%);
  background-position:0 0,0 0,0 0,0 0;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment: scroll;
  background-origin:padding-box,padding-box,padding-box,padding-box;
  background-clip:border-box,border-box,border-box,border-box;
  font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Helvetica Neue,Helvetica,Arial,sans-serif
}

.glow {
  filter:blur(24px);
  z-index:-1;
  background:radial-gradient(circle,#355cff40,#355cff14 40%,#0000 65%);
  width:900px;
  height:900px;
  position:fixed;
  top:-20%;
  left:50%;
  transform:translate(-50%)
}

.btn {
  background:#ffffff8c;
  border:1px solid #ffffffb3;
  border-radius:999px;
  padding:14px 20px;
  font-size:14px;
  transition:all .3s;
  box-shadow:0 20px 50px #0f172a26,inset 0 1px #ffffffe6
}

.btn:hover {
  transform:translateY(-3px);
  box-shadow:0 30px 80px #0f172a38
}

.liquid {
  -webkit-backdrop-filter:blur(12px)saturate(180%)brightness(1.05);
  isolation:isolate;
  background:#ffffff8c;
  border:1px solid #ffffffb3;
  border-radius:32px;
  position:relative;
  box-shadow:0 30px 70px #00000026,inset 0 1px #fffffff2,inset 0 -2px 8px #0000000d
}

.liquid:before {
  content:"";
  border-radius:inherit;
  opacity:.35;
  pointer-events:none;
  background:linear-gradient(145deg,#fffffff2,#fff6 40%,#0000 70%);
  position:absolute;
  inset:0
}

.liquid:after {
  content:"";
  border-radius:inherit;
  mix-blend-mode:screen;
  opacity:.5;
  pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0,#ffffffe6,#0000 72%);
  position:absolute;
  inset:0
}

.nav-fixed {
  z-index:1000;
  position:fixed;
  top:18px;
  left:50%;
  transform:translate(-50%)
}

.nav-container {
  align-items:center;
  gap:6px;
  padding:6px 12px;
  display:flex
}

.nav-brand {
  white-space:nowrap;
  border-right:1px solid #ffffff73;
  padding:0 14px;
  font-size:13px;
  font-weight:600
}

.nav-tabs {
  gap:4px;
  display:flex;
  position:relative
}

.nav-btn {
  color:var(--muted);
  border-radius:999px;
  padding:6px 16px;
  font-size:13px;
  font-weight:500;
  transition:color .3s
}

.nav-btn.active,.nav-btn:hover {
  color:#000
}

#pill {
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  z-index:-1;
  background:#ffffffa6;
  border-radius:999px;
  height:calc(100% - 8px);
  transition:all .55s cubic-bezier(.16,1,.3,1);
  position:absolute;
  top:4px;
  left:6px;
  box-shadow:0 12px 28px #00000024,inset 0 1px #fffffff2
}

.page {
  max-width:1100px;
  margin:0 auto;
  padding:125px 30px 120px;
  display:block
}

.page>h2 {
  letter-spacing:-.035em;
  color:#111;
  margin:0 0 70px;
  font-size:34px;
  font-weight:700
}

.hero-title {
  letter-spacing:-.02em;
  color:#1d1d1f;
  max-width:720px;
  margin:0 auto 24px;
  font-size:39px;
  font-weight:600;
  line-height:1.12
}

@media (width<=768px) {
  .hero-title {
  font-size:32px
}


@media (width<=768px) {

  html, body {
  height: 100%;
}

#image-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  background: rgba(2, 6, 23, 0.96);
  overflow: hidden;
}

#image-wrapper {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 16px 16px;
  overflow: hidden;
}

#modal-img {
  max-width: 100%;
  max-height: calc(100dvh - 140px);
  object-fit: contain;
  position: relative;
  pointer-events: none;
  cursor: default;
  box-shadow: 0 40px 120px #00000080;
}

@media (width<=768px) {
  .lightbox-close {
    position: absolute !important;

    top: -12px !important;   /* sits just above image */
    right: -12px !important;

    left: auto !important;
    bottom: auto !important;
    transform: none !important;

    z-index: 1000 !important;
  }
}

#prev-btn,
#next-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2147483646;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0,0,0,0.5);
  color: #fff;
}

#prev-btn { left: 16px; }
#next-btn { right: 16px; }

@media (max-width: 768px) {
  #image-wrapper {
    padding-top: 72px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
  }

  #modal-img {
    max-height: calc(100dvh - 120px);
  }

  #close-btn {
    top: 12px !important;
    right: 12px !important;
    width: 40px;
    height: 40px;
  }

  #prev-btn,
  #next-btn {
    width: 40px;
    height: 40px;
  }
}

}

}

.hero-title span {
  color:#111;
  font-weight:800;
  display:block
}

h2 {
  letter-spacing:-.02em;
  font-size:42px;
  font-weight:600
}

p {
  color:#6e6e73;
  max-width:720px;
  font-size:20px;
  font-weight:400;
  line-height:1.8
}

.card-grid {
  perspective:1600px
}

.card {
  cursor:pointer;
  transform-style:preserve-3d;
  will-change:transform;
  backface-visibility:hidden;
  transform:translateZ(0) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  border-radius:42px;
  padding:40px;
  transition:box-shadow .4s cubic-bezier(.16,1,.3,1);
  position:relative;
  box-shadow:0 30px 60px #0f172a1f,0 8px 20px #0f172a14,inset 0 1px #fffffff2
}

.card:hover {
  will-change:transform
}

.card:after {
  content:"";
  border-radius:inherit;
  mix-blend-mode:screen;
  opacity:.45;
  pointer-events:none;
  transition:opacity .35s var(--ease);
  background:linear-gradient(145deg,#fffffff2,#fff3 45%,#0000 70%);
  position:absolute;
  inset:0
}

.card:hover:after {
  opacity:.7
}

.card:before {
  content:"";
  border-radius:inherit;
  background:radial-gradient(600px circle at var(--x,50%) var(--y,50%), #fff9, transparent 40%);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
  position:absolute;
  inset:0
}

.card:hover:before {
  opacity:.7
}

.card h3 {
  letter-spacing:-.01em;
  color:#1d1d1f;
  margin-bottom:6px;
  font-size:22px;
  font-weight:600
}

.card p {
  color:#6e6e73;
  font-size:17px;
  line-height:1.6
}

.card:hover {
  --lift:-12px;
  box-shadow:0 80px 160px #0f172a38,0 30px 60px #0f172a24,inset 0 1px #fffffff2
}

.project-wrapper {
  margin-top:140px
}

.project-card {
  -webkit-backdrop-filter:blur(18px)saturate(180%);
  background:#fff9;
  border:1px solid #ffffffb3;
  border-radius:42px;
  grid-template-columns:1fr 1.25fr;
  gap:90px;
  padding:70px 80px;
  display:grid;
  box-shadow:0 60px 140px #0f172a2e
}

.project-left h2 {
  margin-bottom:20px;
  font-size:38px
}

.project-left p {
  margin-bottom:30px;
  font-size:16px
}

.project-contact {
  color:#4b5563;
  margin-bottom:20px;
  font-size:14px
}

.project-socials {
  flex-wrap:nowrap;
  align-items:center;
  gap:18px;
  display:flex
}

.project-socials a {
  justify-content:center;
  align-items:center;
  width:28px;
  height:28px;
  display:flex
}

.project-socials svg {
  width:24px;
  height:24px
}

.project-socials svg path {
  fill:#1f2937;
  transition:fill .2s
}

.project-socials a:hover svg path {
  fill:#2563eb
}

.project-socials a:first-child {
  transform:scale(1.1)
}

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

.project-row {
  grid-template-columns:1fr 1fr;
  gap:28px;
  display:grid
}

.project-form label {
  color:#6b7280;
  margin-bottom:8px;
  font-size:12px;
  display:block
}

.project-form input,.project-form textarea {
  background:#ffffffd9;
  border:1px solid #0000000f;
  border-radius:18px;
  outline:none;
  width:100%;
  padding:16px 20px;
  font-size:14px
}

.project-form textarea {
  resize:none;
  min-height:140px
}

.project-select {
  cursor:pointer;
  position:relative
}

.panel-overlay,
.project-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);

  overflow: hidden;
  margin: 0;
  padding: 0;

  padding: 90px 0 20px 0;
}

body.no-scroll {
    overflow: hidden;
  height: 100vh;
  touch-action: none;
}

.project-selected {
  background:#ffffffd9;
  border:1px solid #0000000f;
  border-radius:18px;
  padding:16px 20px
}

.project-options {
  z-index:10000;
  background:#fff;
  border:1px solid #0000000f;
  border-radius:18px;
  width:100%;
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  box-shadow:0 20px 50px #0000001a
}

.project-option {
  cursor:pointer;
  padding:14px 18px
}

.project-option:hover {
  background:#f3f4f6
}

.project-select.open .project-options {
  display:block
}

.project-btn {
  -webkit-backdrop-filter:blur(14px)saturate(160%);
  color:#111827;
  cursor:pointer;
  transition:.35s var(--ease);
  background:linear-gradient(#ffffffd9,#ffffffa6);
  border:1px solid #fffc;
  border-radius:24px;
  padding:18px;
  font-weight:500;
  position:relative;
  box-shadow:0 20px 50px #0f172a26,inset 0 1px #ffffffe6
}

.project-btn:hover {
  transform:translateY(-4px);
  box-shadow:0 30px 80px #0f172a38,inset 0 1px #fffffff2
}

.pricing-highlight {
  -webkit-backdrop-filter:blur(8px)saturate(140%);
  color:#111827;
  background:#ffffff73;
  border-left:2px solid #fff9;
  border-right:2px solid #fff9;
  font-weight:600;
  transition:all .25s;
  box-shadow:inset 0 1px #ffffffe6,inset 0 -1px 6px #0000000d,0 8px 24px #0f172a1f
}

.project-contact {
  margin-bottom:20px;
  position:relative
}

.project-email {
  color:#111827;
  letter-spacing:-.01em;
  cursor:pointer;
  background:#355cff1f;
  border:1px solid #355cff40;
  border-radius:999px;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  font-size:15.5px;
  font-weight:500;
  transition:all .25s;
  display:inline-flex
}

.project-email:hover {
  background:#355cff33
}

.copy-toast {
  color:#fff;
  opacity:0;
  pointer-events:none;
  background:#111827;
  border-radius:6px;
  padding:6px 10px;
  font-size:12px;
  transition:all .2s;
  position:absolute;
  top:-32px;
  left:0;
  transform:translateY(6px)
}

.copy-toast.show {
  opacity:1;
  transform:translateY(0)
}

.hero-cta {
  -webkit-backdrop-filter:blur(14px)saturate(160%);
  color:#111827;
  cursor:pointer;
  transition:all .35s var(--ease);
  background:#ffffff8c;
  border:1px solid #ffffffb3;
  border-radius:999px;
  padding:16px 30px;
  font-size:15px;
  font-weight:500;
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 50px #0f172a26,inset 0 1px #ffffffe6
}

.hero-cta:hover {
  transform:translateY(-4px);
  box-shadow:0 30px 80px #0f172a38,inset 0 1px #fffffff2
}

.hero-glow {
  filter:blur(24px);
  pointer-events:none;
  z-index:-1;
  background:radial-gradient(circle,#355cff40,#355cff14 40%,#0000 65%);
  width:900px;
  height:900px;
  animation:18s ease-in-out infinite alternate floatGlow;
  position:fixed;
  top:-20%;
  left:50%;
  transform:translate(-50%)
}

@keyframes floatGlow {
  0% {
  transform:translate(-50%)translateY(0)
}

to {
  transform:translate(-50%)translateY(40px)
}

}

.form-status {
  opacity:0;
  margin-top:12px;
  font-size:14px;
  transition:all .3s;
  transform:translateY(6px)
}

.form-status.success {
  color:#16a34a;
  opacity:1;
  transform:translateY(0)
}

.form-status.error {
  color:#dc2626;
  opacity:1;
  transform:translateY(0)
}

.project-form input:focus,.project-form textarea:focus {
  border-color:#355cff99;
  box-shadow:0 0 0 4px #355cff1a
}

.field-error {
  color:#b91c1c;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:0;
  background:#dc262614;
  border:1px solid #dc262640;
  border-radius:12px;
  margin-top:8px;
  padding:8px 12px;
  font-size:12px;
  transition:all .25s;
  position:relative;
  transform:translateY(6px)
}

.field-error.show {
  opacity:1;
  transform:translateY(0)
}

.project-form input.error,.project-form textarea.error {
  border-color:#dc262680;
  box-shadow:0 0 0 4px #dc262614
}

@media (width<=768px) {
  .nav-brand {
  display:none
}

.nav-container {
  padding:6px 10px
}

.nav-btn {
  padding:6px 10px;
  font-size:12px
}

#pill {
  display:none
}

.page {
  padding:90px 20px 60px
}

.hero-title {
  font-size:28px;
  line-height:1.2
}

p {
  font-size:16px;
  line-height:1.6
}

.project-card {
  grid-template-columns:1fr;
  gap:40px;
  padding:40px 24px
}

.project-row {
  grid-template-columns:1fr
}

.hero-glow {
  filter:blur(28px);
  width:700px;
  height:700px
}

}

@media (width<=480px) {
  .page {
  padding:80px 16px 50px
}

.hero-title {
  font-size:24px
}

.card {
  border-radius:28px;
  padding:24px
}

.project-card {
  padding:28px 18px
}

}

#panel-overlay {
  scrollbar-width:thin;
  scrollbar-color:#0000004d transparent
}

#panel-overlay ::-webkit-scrollbar {
  width:6px
}

#panel-overlay ::-webkit-scrollbar-track {
  background:0 0
}

#panel-overlay ::-webkit-scrollbar-thumb {
  background:#00000026;
  border-radius:999px
}

#panel-overlay ::-webkit-scrollbar-thumb:hover {
  background:#0006
}

.panel-scroll {
  overscroll-behavior:contain;
  scrollbar-width:none;
  overflow:hidden auto
}

.panel-scroll::-webkit-scrollbar {
  display:none
}

.panel-scroll:after {
  content:"";
  opacity:.4;
  pointer-events:none;
  background:#0003;
  border-radius:32px;
  width:3px;
  height:40px;
  position:absolute;
  top:16px;
  right:8px
}

@media (width<=768px) {
  .nav-fixed {
  width:100%;
  padding:0 12px;
  top:10px
}

.nav-container {
  justify-content:center;
  width:100%;
  padding:6px 10px;
  overflow:hidden
}

.nav-tabs {
  flex-wrap:nowrap;
  justify-content:center;
  gap:4px;
  display:flex
}

.nav-btn {
  padding:6px 8px;
  font-size:11px
}

.nav-brand,#pill {
  display:none
}

}

.projects-grid {
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  display:grid
}

.section-intro {
  max-width:760px;
  margin:12px 0 32px;
  font-size:16px
}

.overview-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  display:grid
}

.dashboard-tile {
  min-height:150px;
  padding:26px
}

.dashboard-tile p {
  margin-top:8px;
  font-size:15px
}

.project-card-item {
  --rx:0deg;
  --ry:0deg;
  --lift:0px;
  border-radius:42px;
  padding:32px
}

.project-card-item:hover {
  --lift:-14px;
  transform:translateZ(0) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift))
}

.project-panel {
  width: min(680px, 96vw);

  height: auto;
  max-height: calc(100vh - 120px); /* key fix */

  display: flex;
  flex-direction: column;
  overflow: hidden;

  border-radius: 28px;
  background: #ffffffbf;
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid #ffffffb3;
}

.project-panel-header {
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  display:flex
}

.project-panel-header h3 {
  letter-spacing:-.03em;
  font-size:26px
}

.project-panel-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  display:grid
}

.project-panel-section {
  background:#ffffff80;
  border:1px solid #fff9;
  border-radius:24px;
  padding:18px;
  box-shadow:0 20px 50px #0f172a1f
}

.project-panel-section h4 {
  margin-bottom:12px;
  font-size:17px
}

.project-panel-section input,.project-panel-section textarea,.project-panel-section select,.messages-shell select,.invoice-create-row input,.invoice-create-row select {
  background:#ffffffbf;
  border:1px solid #14141414;
  border-radius:14px;
  width:100%;
  margin-bottom:10px;
  padding:11px 12px;
  font-size:14px
}

.timeline-list,.list-stack,.panel-list {
  flex-direction:column;
  gap:10px;
  display:flex
}

.timeline-item,.list-row {
  border-radius:16px;
  padding:12px 14px
}

.timeline-meta {
  color:#6b7280;
  margin-bottom:6px;
  font-size:12px
}

.milestone-toggle {
  color:#6b7280;
  align-items:center;
  gap:10px;
  margin:6px 0 10px;
  font-size:13px;
  display:flex
}

.list-row {
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  display:flex
}

.upload-btn input {
  display:none
}

.chat-list {
  scroll-behavior:smooth;
  flex-direction:column;
  gap:8px;
  max-height:48vh;
  padding-right:2px;
  display:flex;
  overflow:auto
}

.chat-empty {
  color:#6b7280;
  padding:6px 2px;
  font-size:13px
}

.chat-bubble {
  border-radius:16px;
  flex-direction:column;
  max-width:85%;
  padding:10px 13px;
  font-size:14px;
  line-height:1.45;
  display:flex;
  box-shadow:0 10px 26px #0f172a0f
}

.chat-body {
  word-break:break-word
}

.chat-time {
  opacity:.55;
  margin-top:6px;
  font-size:11px
}

.chat-admin {
  color:#fff;
  background:#101828db;
  margin-left:auto
}

.chat-client {
  color:#121212;
  background:#ffffffd1;
  border:1px solid #ffffffb3;
  margin-right:auto
}

.chat-composer {
  gap:10px;
  margin-top:10px;
  display:flex
}

.chat-composer input {
  background:#ffffffd1;
  border:1px solid #00000014;
  border-radius:32px;
  outline:none;
  flex:1;
  padding:11px 14px;
  font-size:14px
}

.messages-shell {
  border-radius:28px;
  padding:22px
}

.invoice-create-row {
  border-radius:22px;
  grid-template-columns:1.3fr repeat(3,1fr) auto;
  gap:10px;
  margin-bottom:16px;
  padding:12px;
  display:grid
}

.role-note {
  border-radius:16px;
  margin-top:14px;
  padding:12px 14px;
  font-size:13px
}

.signout-btn {
  z-index:1300;
  border-radius:32px;
  padding:7px 14px;
  font-size:12px;
  position:fixed;
  top:20px;
  right:20px
}

@media (width<=920px) {
  .overview-grid,.project-panel-grid,.invoice-create-row {
  grid-template-columns:1fr
}

}

.auth-header h2 {
  letter-spacing:-.035em;
  margin-bottom:6px;
  font-size:34px
}

.auth-kicker {
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#5b6170;
  margin-bottom:8px;
  font-size:12px
}

.auth-subtitle {
  margin-bottom:16px;
  font-size:14px;
  line-height:1.6
}

.auth-subtitle span {
  color:#111827;
  font-weight:600
}

.auth-card label {
  color:#5b6170;
  margin-bottom:5px;
  font-size:12px;
  display:block
}

.auth-actions {
  display:contents
}

.auth-link-btn {
  background:#fff9;
  border:1px solid #fffc;
  border-radius:14px;
  padding:10px 12px
}

.auth-segmented {
  background:#ffffff80;
  border:1px solid #ffffffbf;
  border-radius:32px;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin:12px 0 10px;
  padding:3px;
  display:grid
}

.auth-segmented button {
  color:#5b6170;
  border-radius:32px;
  padding:8px 12px;
  font-size:12px
}

.auth-segmented .active {
  color:#111827;
  background:#ffffffdb
}

.auth-feedback {
  border-radius:14px;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin:12px 0;
  padding:10px 12px;
  font-size:13px;
  display:flex
}

.auth-feedback-error {
  color:#991b1b;
  background:#dc26261a;
  border:1px solid #dc262659
}

.auth-feedback-success {
  color:#14532d;
  background:#16a34a1a;
  border:1px solid #16a34a59
}

.auth-guard-note {
  color:#4b5563;
  margin-top:8px;
  font-size:12px
}

.role-preview-row {
  gap:8px;
  margin-top:10px;
  display:flex
}

.dashboard-top {
  justify-content:space-between;
  align-items:center;
  gap:12px;
  display:flex
}

.role-pill {
  text-transform:capitalize;
  border-radius:999px;
  width:max-content;
  padding:6px 12px;
  font-size:12px;
  font-weight:600
}

.role-pill.admin {
  color:#7c2d12;
  background:#fb923c33;
  border:1px solid #fb923c59
}

.role-pill.developer {
  color:#1e3a8a;
  background:#60a5fa33;
  border:1px solid #60a5fa59
}

.role-pill.client {
  color:#166534;
  background:#4ade802e;
  border:1px solid #4ade8059
}

.profile-card {
  border-radius:24px;
  margin-top:20px;
  padding:20px
}

.profile-edit-row {
  gap:10px;
  margin-top:10px;
  display:flex
}

.profile-edit-row input {
  background:#ffffffc2;
  border:1px solid #00000014;
  border-radius:12px;
  flex:1;
  padding:10px 12px
}

.confirm-chip {
  color:#fff;
  background:#111827d9;
  border-radius:999px;
  width:max-content;
  margin-top:10px;
  padding:7px 11px;
  font-size:12px
}

.confirm-actions {
  gap:8px;
  margin-top:12px;
  display:flex
}

@media (width<=768px) {
  .auth-actions {
  grid-template-columns:1fr
}

.profile-edit-row {
  flex-direction:column
}

}

@media (width<=900px) {
  .projects-grid {
  grid-template-columns:repeat(2,1fr)
}

}

@media (width<=600px) {
  .projects-grid {
  grid-template-columns:1fr
}

}

.nav-settings-btn {
  width:32px;
  height:32px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  background:#ffffffbf;
  border:1px solid #0000000a;
  border-radius:999px;
  justify-content:center;
  align-items:center;
  display:flex;
  box-shadow:0 8px 20px #0f172a29
}

.nav-settings-btn:hover,.nav-settings-btn.active {
  background:#fffffff2;
  transform:translateY(-2px);
  box-shadow:0 14px 32px #0f172a38
}

.nav-settings-btn svg {
  width:16px;
  height:16px
}

.nav-icon {
  justify-content:center;
  align-items:center;
  width:18px;
  height:18px;
  margin-right:6px;
  display:inline-flex
}

.nav-icon svg {
  width:16px;
  height:16px
}

.nav-label {
  text-transform:capitalize
}

.dashboard-top h2 {
  font-size:38px
}

.tile-header {
  align-items:center;
  gap:10px;
  margin-bottom:6px;
  display:flex
}

.tile-icon {
  background:#fffc;
  border-radius:999px;
  justify-content:center;
  align-items:center;
  width:26px;
  height:26px;
  display:flex;
  box-shadow:0 10px 24px #0f172a24
}

.tile-icon svg {
  width:15px;
  height:15px
}

.settings-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  display:grid
}

.confirm-inline {
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:8px;
  display:flex
}

.danger-btn {
  color:#b91c1c;
  border-color:#f871718c
}

.auth-form {
  flex-direction:column;
  gap:10px;
  margin-top:10px;
  display:flex
}

.auth-form label {
  color:#6b7280;
  font-size:12px
}

.auth-wide-link {
  text-align:center;
  grid-column:1/-1;
  width:100%
}

.auth-inline-prompt {
  border:1px solid #0000000f;
  border-radius:18px;
  margin-top:14px;
  padding:16px
}

.auth-inline-prompt h3 {
  color:#0b1220;
  margin:0 0 6px;
  font-size:15px
}

.auth-inline-prompt p {
  color:#475569;
  max-width:none;
  margin:0 0 12px;
  font-size:13px
}

.auth-inline-actions {
  gap:10px;
  display:flex
}

@media (width<=520px) {
  .auth-actions {
  grid-template-columns:1fr
}

.auth-wide-link {
  grid-column:auto
}

.auth-inline-actions {
  flex-direction:column
}

}

.glass-select {
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:#111;
  appearance:none;
  background:#ffffffd9;
  border:1px solid #ffffffe6;
  border-radius:16px;
  width:100%;
  margin-bottom:10px;
  padding:12px 42px 12px 14px;
  font-size:14px;
  transition:all .2s;
  box-shadow:0 10px 30px #0f172a14,inset 0 1px #ffffffe6
}

.glass-select:hover {
  background:#fffffff2
}

.glass-select:focus {
  border-color:#111;
  box-shadow:0 0 0 3px #00000014
}

.create-project-block textarea {
  resize:none;
  background:#ffffffbf;
  border:1px solid #14141414;
  border-radius:14px;
  outline:none;
  width:100%;
  min-height:110px;
  margin-bottom:10px;
  padding:11px 12px;
  font-size:14px
}

.create-project-title {
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
  display:flex
}

.create-project-title p {
  color:#6b7280;
  margin:0;
  font-size:13px;
  line-height:1.4
}

@media (width<=900px) {
  .settings-grid {
  grid-template-columns:1fr
}

}

.page-header-row {
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:0;
  display:flex
}

.page-header-row h2 {
  margin-bottom:4px
}

.section-intro {
  color:#6e6e73;
  max-width:560px;
  margin:-52px 0 40px;
  font-size:15px;
  line-height:1.5
}

.muted-text {
  color:#9ca3af;
  margin:0;
  font-size:13px
}

.capitalize {
  text-transform:capitalize
}

.field-hint {
  color:#9ca3af;
  margin-top:4px;
  font-size:11px
}

.required {
  color:#ef4444
}

.notice-toast {
  z-index:9999;
  pointer-events:none;
  border-radius:999px;
  padding:10px 20px;
  font-size:13px;
  font-weight:500;
  animation:.25s cubic-bezier(.16,1,.3,1) toastIn;
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translate(-50%);
  box-shadow:0 12px 40px #0003
}

.notice-success {
  color:#fff;
  background:#111
}

.notice-error {
  color:#fff;
  background:#dc2626eb
}

@keyframes toastIn {
  0% {
  opacity:0;
  transform:translate(-50%)translateY(12px)
}

to {
  opacity:1;
  transform:translate(-50%)translateY(0)
}

}

.skeleton-row {
  background:linear-gradient(90deg,#fff6 25%,#ffffffb3 50%,#fff6 75%) 0 0/200% 100%;
  border-radius:14px;
  height:52px;
  margin-bottom:8px;
  animation:1.4s infinite shimmer
}

@keyframes shimmer {
  0% {
  background-position:200% 0
}

to {
  background-position:-200% 0
}

}

.btn-primary {
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
  background:#111;
  border-radius:999px;
  align-items:center;
  gap:6px;
  padding:11px 20px;
  font-size:13px;
  font-weight:500;
  transition:all .2s;
  display:inline-flex;
  box-shadow:0 8px 20px #0000002e
}

.btn-primary:hover {
  background:#000;
  transform:translateY(-1px);
  box-shadow:0 12px 28px #0000003d
}

.btn-primary:active {
  transform:scale(.98)
}

.btn-primary:disabled {
  opacity:.5;
  pointer-events:none
}

.btn-primary.btn-secondary {
  color:#111;
  background:#ffffffb3;
  box-shadow:0 4px 12px #00000014
}

.btn-primary.btn-secondary:hover {
  background:#fffffff2
}

.btn-sm {
  padding:8px 16px;
  font-size:12px
}

.btn-ghost {
  color:#6e6e73;
  cursor:pointer;
  white-space:nowrap;
  background:#fff9;
  border:1px solid #00000014;
  border-radius:999px;
  padding:11px 20px;
  font-size:13px;
  transition:all .2s
}

.btn-ghost:hover {
  color:#111;
  background:#ffffffe6
}

.btn-outline {
  color:#111;
  cursor:pointer;
  white-space:nowrap;
  background:0 0;
  border:1px solid #00000024;
  border-radius:999px;
  padding:9px 18px;
  font-size:13px;
  transition:all .2s
}

.btn-outline:hover {
  background:#0000000a
}

.btn-outline:disabled {
  opacity:.5;
  pointer-events:none
}

.btn-danger {
  color:#b91c1c;
  cursor:pointer;
  white-space:nowrap;
  background:#ef44441a;
  border:1px solid #ef444440;
  border-radius:999px;
  padding:9px 18px;
  font-size:13px;
  transition:all .2s
}

.btn-danger:hover {
  background:#ef44442e
}

.form-grid {
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:20px;
  display:grid
}

.span-2 {
  grid-column:1/-1
}

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

.field-group label {
  color:#6e6e73;
  letter-spacing:.01em;
  font-size:12px;
  font-weight:500
}

.field-group input,.field-group textarea,.field-group select {
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:#111;
  background:#ffffffbf;
  border:1px solid #00000017;
  border-radius:12px;
  outline:none;
  width:100%;
  padding:11px 14px;
  font-family:inherit;
  font-size:14px;
  transition:all .2s
}

.field-group input:focus,.field-group textarea:focus {
  background:#fffffff2;
  border-color:#00000040;
  box-shadow:0 0 0 3px #0000000d
}

.field-group input:disabled,.input-disabled {
  opacity:.6;
  cursor:not-allowed;
  background:#fff6!important
}

.field-group textarea {
  resize:vertical;
  min-height:80px
}

.field-row {
  grid-template-columns:1fr 1fr;
  gap:12px;
  display:grid
}

.field-error input,.field-error select {
  border-color:#ef444466!important
}

.field-error-msg {
  color:#dc2626;
  font-size:11px
}

.read-field {
  color:#111;
  background:#fff6;
  border:1px solid #0000000d;
  border-radius:12px;
  min-height:42px;
  padding:11px 14px;
  font-size:14px
}

.read-field-tall {
  white-space:pre-wrap;
  min-height:90px
}

.form-actions {
  justify-content:flex-end;
  gap:10px;
  padding-top:4px;
  display:flex
}

.create-panel {
  margin-bottom:32px;
  padding:28px 32px
}

.create-panel-header {
  margin-bottom:22px
}

.create-panel-header h3 {
  color:#111;
  margin:0 0 4px;
  font-size:18px;
  font-weight:600
}

.create-panel-header p {
  color:#6e6e73;
  margin:0;
  font-size:13px
}

.db-header {
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:36px;
  display:flex
}

.db-title {
  letter-spacing:-.03em!important;
  margin:0 0 6px!important;
  font-size:34px!important;
  font-weight:700!important
}

.db-subtitle {
  color:#6e6e73;
  margin:0;
  font-size:14px;
  line-height:1
}

.stats-row {
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:24px;
  display:grid
}

.stat-tile {
  cursor:pointer;
  padding:22px 20px;
  transition:all .28s cubic-bezier(.16,1,.3,1)
}

.stat-tile:hover {
  transform:translateY(-4px)
}

.stat-icon-wrap {
  background:#fffc;
  border-radius:8px;
  justify-content:center;
  align-items:center;
  width:30px;
  height:30px;
  margin-bottom:14px;
  display:flex;
  box-shadow:0 4px 12px #00000014
}

.stat-value {
  color:#111;
  letter-spacing:-.03em;
  font-size:28px;
  font-weight:700;
  line-height:1
}

.stat-label {
  color:#6e6e73;
  margin-top:4px;
  font-size:12px;
  font-weight:500
}

.stat-sub {
  color:#9ca3af;
  margin-top:2px;
  font-size:11px
}

.stat-blue .stat-icon-wrap {
  color:#3b82f6;
  background:#3b82f61a
}

.stat-amber .stat-icon-wrap {
  color:#d97706;
  background:#f59e0b1a
}

.stat-purple .stat-icon-wrap {
  color:#7c3aed;
  background:#8b5cf61a
}

.stat-green .stat-icon-wrap {
  color:#16a34a;
  background:#22c55e1a
}

.db-columns {
  grid-template-columns:1.4fr 1fr;
  gap:16px;
  display:grid
}

.db-panel {
  padding:22px 24px
}

.db-panel-header {
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  display:flex
}

.db-panel-header h3 {
  color:#111;
  margin:0;
  font-size:15px;
  font-weight:600
}

.db-link-btn {
  color:#6e6e73;
  cursor:pointer;
  align-items:center;
  gap:4px;
  font-size:12px;
  transition:color .2s;
  display:inline-flex
}

.db-link-btn:hover {
  color:#111
}

.recent-row {
  cursor:pointer;
  border-radius:12px;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
  padding:10px 12px;
  transition:background .15s;
  display:flex
}

.recent-row:hover {
  background:#fff9
}

.recent-info {
  flex-direction:column;
  gap:2px;
  display:flex
}

.recent-name {
  color:#111;
  font-size:13px;
  font-weight:500
}

.recent-milestone {
  color:#9ca3af;
  font-size:11px
}

.status-badge-sm {
  text-transform:capitalize;
  white-space:nowrap;
  border-radius:999px;
  padding:3px 8px;
  font-size:10px;
  font-weight:600
}

.status-planning {
  color:#6366f1;
  background:#6464ff1f
}

.status-in-progress {
  color:#d97706;
  background:#f59e0b26
}

.status-review {
  color:#db2777;
  background:#ec48991f
}

.status-completed {
  color:#16a34a;
  background:#22c55e1f
}

.db-empty {
  color:#9ca3af;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:28px;
  display:flex
}

.db-empty p {
  margin:0;
  font-size:13px
}

.qa-list {
  flex-direction:column;
  gap:6px;
  display:flex
}

.qa-btn {
  text-align:left;
  cursor:pointer;
  background:#ffffff80;
  border:1px solid #fffc;
  border-radius:14px;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px 14px;
  transition:all .2s;
  display:flex
}

.qa-btn:hover {
  background:#ffffffd9;
  transform:translateY(-1px)
}

.qa-text {
  flex:1
}

.qa-label {
  color:#111;
  font-size:13px;
  font-weight:500;
  display:block
}

.qa-desc {
  color:#9ca3af;
  margin-top:1px;
  font-size:11px;
  display:block
}

.qa-btn svg {
  color:#9ca3af;
  flex-shrink:0
}

.invoice-summary {
  gap:12px;
  margin-top:8px;
  display:flex
}

.inv-sum-item {
  border-radius:14px;
  flex:1;
  align-items:center;
  gap:10px;
  padding:14px;
  display:flex
}

.inv-pending {
  color:#d97706;
  background:#f59e0b1a
}

.inv-paid {
  color:#16a34a;
  background:#22c55e1a
}

.inv-sum-val {
  color:#111;
  font-size:22px;
  font-weight:700;
  display:block
}

.inv-sum-label {
  color:#6e6e73;
  font-size:11px;
  display:block
}

.mode-bar {
  border-radius:999px;
  gap:6px;
  width:fit-content;
  margin-bottom:28px;
  padding:6px;
  display:flex
}

.mode-btn {
  color:#6e6e73;
  cursor:pointer;
  border-radius:999px;
  align-items:center;
  gap:7px;
  padding:9px 18px;
  font-size:13px;
  font-weight:500;
  transition:all .2s;
  display:inline-flex
}

.mode-btn:hover {
  color:#111;
  background:#ffffffb3
}

.mode-btn.active {
  color:#fff;
  background:#111;
  box-shadow:0 6px 16px #0003
}

.loading-placeholder {
  text-align:center;
  color:#9ca3af;
  padding:32px;
  font-size:14px
}

.filter-row {
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:24px;
  display:flex
}

.active-tile {
  box-shadow:0 0 0 2px #111,0 20px 60px #0f172a2e
}

.status-badge {
  text-transform:capitalize;
  white-space:nowrap;
  border-radius:999px;
  padding:4px 10px;
  font-size:11px;
  font-weight:600
}

.status-planning .status-badge,.status-badge.status-planning {
  color:#6366f1;
  background:#6464ff26
}

.status-in-progress .status-badge,.status-badge.status-in-progress,.status-in\ progress .status-badge {
  color:#d97706;
  background:#f59e0b26
}

.status-review .status-badge,.status-badge.status-review {
  color:#db2777;
  background:#ec48991f
}

.status-completed .status-badge,.status-badge.status-completed {
  color:#16a34a;
  background:#22c55e1f
}

.project-tile-meta {
  color:#9ca3af;
  align-items:center;
  gap:4px;
  margin-top:8px;
  font-size:12px;
  display:flex
}

.project-tile-meta.muted {
  color:#c4c4cc
}

.status-badge,
.status-pill {
  display: inline-flex;   /* prevents full-width stretch */
  width: fit-content;     /* ensures it only takes needed space */
  max-width: max-content;
}

/* Target the ACTUAL progress bar container */
.panel-top + div {
  max-width: 320px;
}

.progress-bar {
  width: 100%;
}

/* THIS is the important one */
.progress-bar-container,
.progress,
.progress-track {
  max-width: 320px;
}

/* Give header breathing room */
.panel-top {
  padding-top: 10px;
  padding-bottom: 6px;
}

/* Fix status badge spacing */
.panel-top .status-badge {
  margin-bottom: 4px;
}

/* Fix title spacing */
.panel-title {
  margin: 0;
  line-height: 1.2;
}

.panel-title {
  font-size: 20px;
  font-weight: 600;
}

.status-badge {
  font-size: 11px;
  padding: 3px 10px;
}

.panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 10px;
}

.panel-top > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.panel-top > div:last-child {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 28px 32px;
}

.panel-body::-webkit-scrollbar {
  display:none
}

.panel-section {
  margin-bottom:36px
}

.section-title {
  color:#111;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:0 0 14px;
  font-size:13px;
  font-weight:600
}

.section-actions {
  justify-content:flex-end;
  margin-top:12px;
  display:flex
}

.update-composer {
  background:#ffffff8c;
  border:1px solid #fffc;
  border-radius:16px;
  margin-bottom:14px;
  padding:14px
}

.update-textarea {
  color:#111;
  resize:none;
  background:0 0;
  border:none;
  outline:none;
  width:100%;
  font-family:inherit;
  font-size:14px;
  line-height:1.6
}

.update-footer {
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
  display:flex
}

.milestone-toggle {
  color:#6e6e73;
  cursor:pointer;
  align-items:center;
  gap:6px;
  font-size:12px;
  display:flex
}

.milestone-toggle input {
  width:14px;
  height:14px
}

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

.timeline-item {
  border-radius:14px;
  padding:14px 16px;
  transition:transform .15s
}

.timeline-item:hover {
  transform:translateY(-1px)
}

.timeline-meta {
  align-items:center;
  gap:8px;
  margin-bottom:6px;
  display:flex
}

.timeline-author {
  color:#111;
  font-size:12px;
  font-weight:600
}

.timeline-date {
  color:#9ca3af;
  font-size:11px
}

.timeline-note {
  color:#4b5563;
  margin:0;
  font-size:13px;
  line-height:1.5
}

.chat-window {
  scrollbar-width:none;
  background:#ffffff59;
  border:1px solid #ffffffb3;
  border-radius:20px;
  flex-direction:column;
  gap:12px;
  min-height:240px;
  max-height:360px;
  padding:16px;
  display:flex;
  overflow-y:auto
}

.chat-window::-webkit-scrollbar {
  display:none
}

.chat-empty {
  color:#9ca3af;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  min-height:160px;
  font-size:13px;
  display:flex
}

.chat-empty p {
  margin:0
}

.bubble-wrap {
  flex-direction:column;
  max-width:80%;
  display:flex
}

.bubble-own {
  align-self:flex-end;
  align-items:flex-end
}

.bubble-other {
  align-self:flex-start;
  align-items:flex-start
}

.bubble-sender {
  color:#9ca3af;
  margin-bottom:4px;
  font-size:11px;
  font-weight:500
}

.chat-bubble-msg {
  border-radius:18px;
  max-width:100%;
  padding:10px 14px
}

.bubble-admin {
  color:#fff;
  background:#111;
  border-radius:18px 18px 4px
}

.bubble-client {
  color:#111;
  background:#ffffffd9;
  border:1px solid #0000000f;
  border-radius:18px 18px 18px 4px
}

.bubble-text {
  font-size:13px;
  line-height:1.5
}

.bubble-time {
  opacity:.55;
  margin-top:4px;
  font-size:10px
}

.bubble-admin .bubble-time {
  color:#fff9
}

.bubble-img {
  object-fit:cover;
  border-radius:10px;
  max-width:220px;
  max-height:160px;
  margin-top:6px;
  display:block
}

.bubble-file {
  margin-top:6px
}

.bubble-file-link {
  color:inherit;
  background:#fff3;
  border-radius:8px;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  font-size:12px;
  text-decoration:none;
  display:inline-flex
}

.bubble-file-link:hover {
  background:#ffffff59
}

.chat-composer-panel,.chat-composer-area {
  margin-top:12px
}

.chat-input-row {
  align-items:center;
  gap:8px;
  display:flex
}

.chat-input {
  background:#fffc;
  border:1px solid #00000014;
  border-radius:999px;
  outline:none;
  flex:1;
  height:44px;
  padding:0 16px;
  font-size:14px;
  transition:border-color .2s
}

.chat-input:focus {
  background:#fffffff2;
  border-color:#0003
}

.chat-send-btn {
  color:#fff;
  cursor:pointer;
  background:#111;
  border-radius:999px;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:44px;
  height:44px;
  transition:all .2s;
  display:flex
}

.chat-send-btn:hover {
  background:#000;
  transform:scale(1.05)
}

.chat-send-btn:disabled {
  opacity:.4;
  pointer-events:none
}

.attach-btn {
  cursor:pointer;
  color:#6e6e73;
  background:#ffffffb3;
  border:1px solid #00000014;
  border-radius:999px;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:36px;
  height:36px;
  transition:background .2s;
  display:flex
}

.attach-btn:hover {
  color:#111;
  background:#fffffff2
}

.attach-btn input {
  display:none
}

.file-chip {
  color:#6e6e73;
  background:#0000000f;
  border-radius:999px;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
  padding:4px 10px 4px 8px;
  font-size:11px;
  display:inline-flex
}

.file-chip button {
  color:#9ca3af;
  cursor:pointer;
  background:0 0;
  line-height:1
}

.file-chip button:hover {
  color:#ef4444
}

.files-list {
  flex-direction:column;
  gap:8px;
  margin-top:14px;
  display:flex
}

.file-row {
  border-radius:14px;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  display:flex
}

.file-icon {
  color:#6e6e73;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:28px;
  height:28px;
  display:flex
}

.file-info {
  flex:1;
  min-width:0
}

.file-name {
  color:#111;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:13px;
  font-weight:500;
  display:block;
  overflow:hidden
}

.file-date {
  color:#9ca3af;
  margin-top:2px;
  font-size:11px;
  display:block
}

.file-download-btn {
  color:#6e6e73;
  background:#ffffffb3;
  border:1px solid #0000000f;
  border-radius:8px;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:30px;
  height:30px;
  text-decoration:none;
  transition:all .2s;
  display:flex
}

.file-download-btn:hover {
  color:#fff;
  background:#111
}

.invoice-composer {
  margin-bottom:16px;
  padding:18px
}

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

.invoice-row {
  border-radius:14px;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  display:flex
}

.inv-main {
  flex-direction:column;
  gap:2px;
  display:flex
}

.inv-amount {
  color:#111;
  font-size:16px;
  font-weight:700
}

.inv-desc {
  color:#6e6e73;
  font-size:12px
}

.inv-meta {
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  display:flex
}

.inv-due {
  color:#9ca3af;
  font-size:11px
}

.inv-status {
  text-transform:capitalize;
  border-radius:999px;
  padding:3px 8px;
  font-size:11px;
  font-weight:600
}

.status-paid {
  color:#16a34a;
  background:#22c55e1f
}

.status-pending {
  color:#d97706;
  background:#f59e0b1f
}

.inv-toggle-btn {
  cursor:pointer;
  color:#111;
  background:#ffffffb3;
  border:1px solid #00000014;
  border-radius:999px;
  padding:5px 12px;
  font-size:11px;
  transition:all .2s
}

.inv-toggle-btn:hover {
  background:#0000000f
}

.messages-layout {
  grid-template-columns:240px 1fr;
  gap:16px;
  height:calc(100vh - 260px);
  min-height:480px;
  display:grid
}

.messages-sidebar {
  border-radius:24px;
  flex-direction:column;
  display:flex;
  overflow:hidden
}

.sidebar-label {
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#9ca3af;
  padding:16px 16px 8px;
  font-size:11px;
  font-weight:600
}

.sidebar-project-btn {
  text-align:left;
  cursor:pointer;
  border-radius:12px;
  justify-content:space-between;
  align-items:center;
  width:calc(100% - 12px);
  margin:2px 6px;
  padding:10px 16px;
  transition:background .15s;
  display:flex
}

.sidebar-project-btn:hover {
  background:#fff9
}

.sidebar-project-btn.active {
  background:#00000012
}

.sidebar-project-name {
  color:#111;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:13px;
  font-weight:500;
  overflow:hidden
}

.sidebar-msg-count {
  color:#9ca3af;
  background:#0000000f;
  border-radius:999px;
  flex-shrink:0;
  padding:2px 7px;
  font-size:11px
}

.messages-chat {
  border-radius:24px;
  flex-direction:column;
  display:flex;
  overflow:hidden
}

.chat-header {
  border-bottom:1px solid #0000000d;
  flex-shrink:0;
  padding:18px 20px
}

.chat-project-name {
  color:#111;
  font-size:15px;
  font-weight:600
}

.chat-meta {
  color:#9ca3af;
  margin-top:2px;
  font-size:12px
}

.messages-window {
  background:0 0;
  border:none;
  border-bottom:1px solid #0000000d;
  border-radius:0;
  flex:1;
  max-height:none
}

.chat-composer-area {
  flex-shrink:0;
  padding:14px 16px
}

.invoice-metrics {
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:28px;
  display:grid
}

.metric-card {
  padding:22px 20px
}

.metric-icon {
  border-radius:10px;
  justify-content:center;
  align-items:center;
  width:32px;
  height:32px;
  margin-bottom:12px;
  display:flex
}

.metric-pending .metric-icon {
  color:#d97706;
  background:#f59e0b1f
}

.metric-paid .metric-icon {
  color:#16a34a;
  background:#22c55e1f
}

.metric-total .metric-icon {
  color:#6366f1;
  background:#6366f11f
}

.metric-val {
  color:#111;
  letter-spacing:-.02em;
  font-size:24px;
  font-weight:700
}

.metric-label {
  color:#6e6e73;
  margin-top:2px;
  font-size:12px
}

.invoice-list {
  flex-direction:column;
  gap:12px;
  display:flex
}

.invoice-card {
  transition:transform .2s;
  overflow:hidden
}

.invoice-card:hover {
  transform:translateY(-2px)
}

.invoice-selected {
  box-shadow:0 0 0 2px #111,0 30px 70px #00000026!important
}

.invoice-card-main {
  cursor:pointer;
  justify-content:space-between;
  align-items:flex-start;
  padding:20px 22px;
  display:flex
}

.invoice-card-left {
  flex-direction:column;
  gap:3px;
  display:flex
}

.inv-number {
  color:#9ca3af;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:11px;
  font-weight:600
}

.inv-project {
  color:#111;
  font-size:14px;
  font-weight:600
}

.inv-description {
  color:#6e6e73;
  font-size:13px
}

.invoice-card-right {
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  display:flex
}

.inv-amount-large {
  color:#111;
  letter-spacing:-.02em;
  font-size:20px;
  font-weight:700
}

.inv-due-date {
  color:#9ca3af;
  font-size:12px
}

.inv-status-badge {
  text-transform:capitalize;
  border-radius:999px;
  padding:4px 10px;
  font-size:11px;
  font-weight:600
}

.badge-paid {
  color:#16a34a;
  background:#22c55e1f
}

.badge-pending {
  color:#d97706;
  background:#f59e0b1f
}

.badge-lg {
  padding:6px 14px;
  font-size:13px
}

.invoice-document {
  background:#fff6;
  border-top:1px solid #0000000d;
  padding:24px 22px;
  animation:.2s cubic-bezier(.16,1,.3,1) expandIn
}

@keyframes expandIn {
  0% {
  opacity:0;
  transform:translateY(-8px)
}

to {
  opacity:1;
  transform:translateY(0)
}

}

.invoice-doc-header {
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:24px;
  display:flex
}

.invoice-brand-name {
  color:#111;
  letter-spacing:-.02em;
  font-size:18px;
  font-weight:700
}

.invoice-brand-tagline {
  color:#9ca3af;
  margin-top:3px;
  font-size:11px
}

.invoice-doc-meta {
  text-align:right
}

.invoice-doc-number {
  color:#111;
  font-size:16px;
  font-weight:700
}

.invoice-doc-date,.invoice-doc-due {
  color:#6e6e73;
  margin-top:2px;
  font-size:12px
}

.invoice-doc-body {
  margin-bottom:20px
}

.invoice-line-items {
  border:1px solid #0000000f;
  border-radius:14px;
  overflow:hidden
}

.line-item-header {
  color:#9ca3af;
  text-transform:uppercase;
  letter-spacing:.05em;
  background:#00000008;
  justify-content:space-between;
  padding:10px 16px;
  font-size:11px;
  font-weight:600;
  display:flex
}

.line-item-row {
  color:#111;
  border-top:1px solid #0000000a;
  justify-content:space-between;
  padding:14px 16px;
  font-size:14px;
  display:flex
}

.invoice-notes {
  color:#6e6e73;
  border-top:1px solid #0000000a;
  padding:10px 16px;
  font-size:12px;
  font-style:italic
}

.line-item-total {
  color:#111;
  background:#ffffff80;
  border-top:2px solid #00000014;
  justify-content:space-between;
  padding:14px 16px;
  font-size:15px;
  font-weight:700;
  display:flex
}

.invoice-doc-footer {
  justify-content:space-between;
  align-items:center;
  display:flex
}

.upload-bar {
  border-radius:18px;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  padding:14px 18px;
  display:flex
}

.upload-project-select {
  flex:1;
  min-width:160px;
  margin-bottom:0
}

.upload-pick-btn {
  color:#111;
  cursor:pointer;
  white-space:nowrap;
  text-overflow:ellipsis;
  background:#ffffffb3;
  border:1px solid #00000014;
  border-radius:999px;
  align-items:center;
  gap:8px;
  max-width:240px;
  padding:10px 16px;
  font-size:13px;
  transition:background .2s;
  display:inline-flex;
  overflow:hidden
}

.upload-pick-btn input {
  display:none
}

.upload-pick-btn:hover {
  background:#fffffff2
}

.view-toggle {
  gap:4px;
  margin-left:auto;
  display:flex
}

.view-btn {
  color:#9ca3af;
  cursor:pointer;
  background:#ffffff80;
  border-radius:8px;
  justify-content:center;
  align-items:center;
  width:34px;
  height:34px;
  transition:all .15s;
  display:flex
}

.view-btn:hover {
  color:#111;
  background:#fffc
}

.view-btn.active {
  color:#fff;
  background:#111
}

.files-grid {
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
  margin-top:8px;
  display:grid
}

.file-card {
  border-radius:18px;
  flex-direction:column;
  transition:transform .2s;
  display:flex;
  position:relative;
  overflow:hidden
}

.file-card:hover {
  transform:translateY(-4px)
}

.file-thumb {
  cursor:pointer;
  background:#fff6;
  justify-content:center;
  align-items:center;
  height:120px;
  display:flex;
  overflow:hidden
}

.file-thumb-img {
  object-fit:cover;
  width:100%;
  height:100%
}

.file-thumb-icon {
  color:#9ca3af;
  flex-direction:column;
  align-items:center;
  gap:6px;
  display:flex
}

.file-thumb-icon span {
  letter-spacing:.05em;
  font-size:10px;
  font-weight:600
}

.file-card-info {
  padding:10px 12px
}

.file-card-name {
  color:#111;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:12px;
  font-weight:500;
  overflow:hidden
}

.file-card-meta {
  color:#9ca3af;
  gap:6px;
  margin-top:3px;
  font-size:10px;
  display:flex
}

.file-card-meta span:first-child:after {
  content:"·";
  margin-left:6px
}

.file-card-dl {
  color:#fff;
  opacity:0;
  background:#00000080;
  border-radius:8px;
  justify-content:center;
  align-items:center;
  width:28px;
  height:28px;
  text-decoration:none;
  transition:opacity .2s;
  display:flex;
  position:absolute;
  top:8px;
  right:8px
}

.file-card:hover .file-card-dl {
  opacity:1
}

.files-list-view {
  flex-direction:column;
  gap:6px;
  display:flex
}

.file-list-row {
  border-radius:14px;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  display:flex
}

.file-list-icon {
  color:#9ca3af;
  flex-shrink:0
}

.file-list-name {
  color:#111;
  white-space:nowrap;
  text-overflow:ellipsis;
  flex:1;
  font-size:13px;
  font-weight:500;
  overflow:hidden
}

.file-list-project {
  color:#9ca3af;
  white-space:nowrap;
  text-overflow:ellipsis;
  flex-shrink:0;
  width:140px;
  font-size:12px;
  overflow:hidden
}

.file-list-type {
  color:#9ca3af;
  flex-shrink:0;
  width:60px;
  font-size:11px
}

.file-list-date {
  color:#9ca3af;
  flex-shrink:0;
  width:90px;
  font-size:12px
}

.file-list-actions {
  flex-shrink:0;
  gap:6px;
  display:flex
}

.file-action-btn {
  color:#6e6e73;
  cursor:pointer;
  background:#ffffffb3;
  border:1px solid #0000000f;
  border-radius:8px;
  justify-content:center;
  align-items:center;
  width:30px;
  height:30px;
  text-decoration:none;
  transition:all .15s;
  display:flex
}

.file-action-btn:hover {
  color:#fff;
  background:#111
}

.preview-overlay {
  z-index:9000;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  background:#020617bf;
  justify-content:center;
  align-items:center;
  padding:20px;
  display:flex;
  position:fixed;
  inset:0
}

.preview-modal {
  flex-direction:column;
  gap:12px;
  max-width:90vw;
  max-height:90vh;
  display:flex;
  position:relative
}

.preview-close {
  cursor:pointer;
  z-index:1;
  background:#fff;
  border-radius:999px;
  justify-content:center;
  align-items:center;
  width:36px;
  height:36px;
  display:flex;
  position:absolute;
  top:-14px;
  right:-14px;
  box-shadow:0 4px 14px #00000040
}

.preview-img {
  object-fit:contain;
  border-radius:14px;
  max-width:80vw;
  max-height:75vh;
  box-shadow:0 40px 120px #00000080
}

.preview-meta {
  color:#fff;
  background:#ffffff1a;
  border-radius:12px;
  justify-content:space-between;
  align-items:center;
  padding:10px 14px;
  font-size:13px;
  display:flex
}

.settings-layout {
  flex-direction:column;
  gap:16px;
  display:flex
}

.settings-card {
  padding:24px 28px
}

.settings-card-header {
  align-items:flex-start;
  gap:14px;
  margin-bottom:20px;
  display:flex
}

.settings-section-icon {
  color:#6e6e73;
  background:#0000000d;
  border-radius:10px;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:36px;
  height:36px;
  display:flex
}

.settings-section-title {
  color:#111;
  margin:0 0 2px;
  font-size:15px;
  font-weight:600
}

.settings-section-desc {
  color:#9ca3af;
  margin:0;
  font-size:12px
}

.settings-fields {
  flex-direction:column;
  gap:14px;
  display:flex
}

.settings-card-footer {
  border-top:1px solid #0000000d;
  justify-content:flex-end;
  margin-top:20px;
  padding-top:16px;
  display:flex
}

.settings-divider {
  background:#0000000d;
  height:1px;
  margin:4px 0
}

.settings-action-row {
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  display:flex
}

.settings-action-label {
  color:#111;
  font-size:14px;
  font-weight:500
}

.settings-action-desc {
  color:#9ca3af;
  margin-top:2px;
  font-size:12px
}

.confirm-inline-row {
  align-items:center;
  gap:8px;
  display:flex
}

.confirm-inline-text {
  color:#6e6e73;
  white-space:nowrap;
  font-size:13px
}

.account-info-grid {
  grid-template-columns:1fr 1fr;
  gap:14px;
  display:grid
}

.account-info-item {
  background:#fff6;
  border-radius:12px;
  flex-direction:column;
  gap:3px;
  padding:12px 14px;
  display:flex
}

.account-info-label {
  color:#9ca3af;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:11px;
  font-weight:500
}

.account-info-value {
  color:#111;
  font-size:13px;
  font-weight:500
}

.mono {
  font-family:ui-monospace,monospace;
  font-size:12px!important
}

.text-green {
  color:#16a34a
}

.text-red {
  color:#dc2626
}

.confirm-overlay {
  z-index:2000;
  background:#02061766;
  justify-content:center;
  align-items:center;
  padding:20px;
  display:flex;
  position:fixed;
  inset:0
}

.confirm-card {
  border-radius:24px;
  width:min(400px,100%);
  padding:28px
}

.confirm-card h4 {
  color:#111;
  margin:0 0 8px;
  font-size:17px;
  font-weight:600
}

.confirm-card p {
  color:#6e6e73;
  margin:0 0 20px;
  font-size:14px;
  line-height:1.5
}

.confirm-actions {
  justify-content:flex-end;
  gap:8px;
  display:flex
}

.empty-state {
  color:#9ca3af;
  text-align:center;
  background:#ffffff80;
  border:1px solid #fffc;
  border-radius:20px;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:48px 32px;
  display:flex
}

.empty-state p {
  color:#9ca3af;
  margin:0;
  font-size:14px
}

.empty-state svg {
  opacity:.5
}

@media (width<=900px) {
  .stats-row {
  grid-template-columns:repeat(2,1fr)
}

.db-columns {
  grid-template-columns:1fr
}

.messages-layout {
  grid-template-columns:1fr;
  height:auto
}

.messages-sidebar {
  max-height:200px;
  overflow-y:auto
}

.invoice-metrics {
  grid-template-columns:repeat(2,1fr)
}

.account-info-grid,.form-grid {
  grid-template-columns:1fr
}

.span-2 {
  grid-column:auto
}

.field-row {
  grid-template-columns:1fr
}

.project-panel {
  border-radius:24px 24px 0 0;
  width:100vw;
  height:90vh
}

}

@media (width<=600px) {
  .stats-row {
  grid-template-columns:1fr 1fr
}

.invoice-metrics {
  grid-template-columns:1fr
}

.files-grid {
  grid-template-columns:repeat(2,1fr)
}

.mode-bar {
  border-radius:18px;
  flex-wrap:wrap
}

}

.login-screen {
  background-color:#0000;
  background-image:radial-gradient(1400px 800px at 0 0,#fff 0%,#0000 55%),radial-gradient(1200px 800px at 100% 0,#edf0f8 0%,#0000 60%),radial-gradient(1200px 900px at 50% 120%,#e7eaf4 0%,#0000 65%),linear-gradient(#fafbff 0%,#f1f3f9 50%,#e9edf6 100%);
  background-position:0 0,0 0,0 0,0 0;
  background-repeat:repeat,repeat,repeat,repeat;
  background-size:auto,auto,auto,auto;
  background-attachment: scroll;
  background-origin:padding-box,padding-box,padding-box,padding-box;
  background-clip:border-box,border-box,border-box,border-box;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  padding:20px;
  display:flex
}

.login-card {
  background:#ffffffeb;
  border:1px solid #fffffff2;
  border-radius:28px;
  width:100%;
  max-width:400px;
  padding:40px 36px 36px;
  box-shadow:0 40px 80px #0f172a1a,0 8px 24px #0f172a0f,inset 0 1px #fff
}

.login-brand {
  letter-spacing:.18em;
  color:#9ca3af;
  text-transform:uppercase;
  margin-bottom:12px;
  font-size:10px;
  font-weight:700
}

.login-title {
  color:#111;
  letter-spacing:-.025em;
  margin:0 0 6px;
  font-size:26px;
  font-weight:600
}

.login-sub {
  color:#6e6e73;
  max-width:none;
  margin:0 0 28px;
  font-size:14px;
  line-height:1.5
}

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

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

.login-field label {
  color:#374151;
  font-size:13px;
  font-weight:500
}

.login-field input {
  color:#111;
  background:#f8f9fccc;
  border:1px solid #00000014;
  border-radius:16px;
  outline:none;
  width:100%;
  padding:13px 16px;
  font-family:inherit;
  font-size:14px;
  transition:all .2s
}

.login-field input:focus {
  background:#fff;
  border-color:#0003;
  box-shadow:0 0 0 3px #0000000d
}

.login-field input::placeholder {
  color:#9ca3af
}

.login-feedback {
  border-radius:12px;
  padding:10px 14px;
  font-size:13px;
  line-height:1.4
}

.login-feedback-error {
  color:#b91c1c;
  background:#ef444414;
  border:1px solid #ef444433
}

.login-feedback-success {
  color:#15803d;
  background:#22c55e14;
  border:1px solid #22c55e33
}

.login-btn-primary {
  color:#fff;
  cursor:pointer;
  background:#111;
  border-radius:999px;
  width:100%;
  margin-top:4px;
  padding:13px;
  font-size:14px;
  font-weight:500;
  transition:all .2s
}

.login-btn-primary:hover {
  background:#000;
  transform:translateY(-1px)
}

.login-btn-primary:disabled {
  opacity:.5;
  pointer-events:none
}

.login-btn-secondary {
  color:#374151;
  cursor:pointer;
  background:#f8f9fce6;
  border:1px solid #00000014;
  border-radius:999px;
  width:100%;
  padding:13px;
  font-size:14px;
  font-weight:500;
  transition:all .2s
}

.login-btn-secondary:hover {
  color:#111;
  background:#fff
}

.login-forgot {
  color:#9ca3af;
  text-align:center;
  cursor:pointer;
  padding:4px;
  font-size:12px;
  transition:color .2s
}

.login-forgot:hover {
  color:#111
}

.email-suggestions {
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  z-index:100;
  background:#fffffffa;
  border:1px solid #00000017;
  border-radius:14px;
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  overflow:hidden;
  box-shadow:0 8px 30px #0000001f
}

.email-suggestion-item {
  text-align:left;
  color:#374151;
  cursor:pointer;
  background:0 0;
  border:none;
  width:100%;
  padding:10px 14px;
  font-size:13px;
  transition:background .15s;
  display:block
}

.email-suggestion-item:hover {
  color:#111;
  background:#0000000a
}

.login-pwd-wrap {
  position:relative
}

.login-pwd-wrap input {
  width:100%;
  padding-right:42px
}

.pwd-toggle {
  color:#9ca3af;
  cursor:pointer;
  background:0 0;
  border:none;
  justify-content:center;
  align-items:center;
  padding:4px;
  transition:color .2s;
  display:flex;
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%)
}

.pwd-toggle:hover {
  color:#374151
}

.pwd-strength {
  align-items:center;
  gap:10px;
  margin-top:8px;
  display:flex
}

.pwd-strength-bars {
  flex:1;
  gap:4px;
  display:flex
}

.pwd-strength-bar {
  border-radius:999px;
  flex:1;
  height:4px;
  transition:background .3s
}

.pwd-strength-label {
  letter-spacing:.04em;
  text-align:right;
  min-width:42px;
  font-size:11px;
  font-weight:600;
  transition:color .3s
}

.nav-container {
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  overflow-x:auto
}

.nav-container::-webkit-scrollbar {
  display:none
}

.nav-tabs-desktop {
  display:flex
}

.page>h2 {
  margin-bottom:8px!important
}

.section-intro {
  margin:0 0 40px!important
}

.comms-page-header h2,.db-title {
  margin-bottom:6px!important
}

.comms-subtitle {
  color:#6e6e73;
  margin:0 0 28px;
  font-size:14px;
  line-height:1.4
}

.comms-layout {
  grid-template-columns:220px 1fr;
  gap:14px;
  height:calc(100vh - 240px);
  min-height:500px;
  display:grid
}

.comms-sidebar {
  scrollbar-width:none;
  border-radius:24px;
  flex-direction:column;
  display:flex;
  overflow-y:auto
}

.comms-sidebar::-webkit-scrollbar {
  display:none
}

.comms-main {
  border-radius:24px;
  flex-direction:column;
  display:flex;
  overflow:hidden
}

.comms-main-header {
  border-bottom:1px solid #0000000d;
  flex-wrap:wrap;
  flex-shrink:0;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:16px 20px;
  display:flex
}

.comms-project-title {
  color:#111;
  font-size:15px;
  font-weight:600
}

.comms-tabs {
  background:#0000000a;
  border-radius:10px;
  gap:4px;
  padding:3px;
  display:flex
}

.comms-tab {
  color:#6e6e73;
  cursor:pointer;
  white-space:nowrap;
  border-radius:8px;
  align-items:center;
  gap:5px;
  padding:6px 12px;
  font-size:13px;
  transition:all .15s;
  display:flex
}

.comms-tab:hover {
  color:#111
}

.comms-tab.active {
  color:#111;
  background:#fff;
  box-shadow:0 2px 8px #00000014
}

.comms-tab-count {
  color:#fff;
  background:#111;
  border-radius:999px;
  margin-left:2px;
  padding:1px 6px;
  font-size:10px;
  font-weight:600
}

.comms-chat-window {
  scrollbar-width:none;
  background:0 0;
  border:none;
  border-radius:0;
  flex:1;
  max-height:none;
  overflow-y:auto
}

.comms-chat-window::-webkit-scrollbar {
  display:none
}

.comms-composer {
  border-top:1px solid #0000000d;
  flex-shrink:0;
  padding:12px 16px
}

.comms-files-panel {
  scrollbar-width:none;
  flex:1;
  padding:16px 20px;
  overflow-y:auto
}

.comms-files-panel::-webkit-scrollbar {
  display:none
}

.files-upload-bar {
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
  display:flex
}

.files-section {
  margin-bottom:24px
}

.files-section-label {
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#9ca3af;
  margin-bottom:12px;
  font-size:11px;
  font-weight:600
}

.image-gallery {
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:8px;
  margin-bottom:8px;
  display:grid
}

.gallery-thumb {
  aspect-ratio:1;
  cursor:pointer;
  background:#0000000a;
  border-radius:12px;
  position:relative;
  overflow:hidden
}

.gallery-thumb img {
  object-fit:cover;
  width:100%;
  height:100%;
  transition:transform .2s;
  display:block
}

.gallery-thumb:hover img {
  transform:scale(1.05)
}

.gallery-thumb-overlay {
  opacity:0;
  background:#00000059;
  justify-content:center;
  align-items:center;
  transition:opacity .2s;
  display:flex;
  position:absolute;
  inset:0
}

.gallery-thumb:hover .gallery-thumb-overlay {
  opacity:1
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background: #000000e0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  padding: 60px 16px 80px;
  outline: none;
  
  overflow: hidden;
}

.lightbox-inner {
  flex-direction:column;
  align-items:center;
  gap:16px;
  max-width:90vw;
  max-height:90vh;
  display:flex;
  position:relative
}

.lightbox-img {
  object-fit:contain;
  border-radius:14px;
  max-width:80vw;
  max-height:72vh;
  display:block;
  box-shadow:0 40px 120px #0009;
  max-width: 100%;
  max-height: 70vh;   /* prevents overflow */
  object-fit: contain;
  border-radius: 12px;
}


.lightbox-close {
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  cursor:pointer;
  color:#fff;
  z-index:9999;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:999px;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  transition:background .2s;
  display:flex;
  position:absolute;
  top:-16px;
  right:-16px;
  flex-shrink:0
}

.lightbox-close:hover {
  background:#ffffff4d
}

.lightbox-nav {
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  cursor:pointer;
  color:#fff;
  z-index:2;
  background:#ffffff1f;
  border:1px solid #ffffff26;
  border-radius:999px;
  justify-content:center;
  align-items:center;
  width:42px;
  height:42px;
  transition:background .2s;
  display:flex;
  position:absolute;
  top:50%;
  transform:translateY(-50%)
}

.lightbox-nav:hover {
  background:#ffffff40
}

.lightbox-prev {
  left:-56px
}

.lightbox-next {
  right:-56px
}

.lightbox-footer {
  background:#ffffff14;
  border:1px solid #ffffff1a;
  border-radius:12px;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  width:100%;
  padding:10px 14px;
  display:flex
}

.lightbox-name {
  color:#ffffffb3;
  white-space:nowrap;
  text-overflow:ellipsis;
  max-width:200px;
  font-size:13px;
  overflow:hidden
}

.lightbox-counter-row {
  align-items:center;
  gap:12px;
  display:flex
}

.lightbox-counter {
  color:#ffffff73;
  white-space:nowrap;
  font-size:12px;
  font-weight:500
}

.lightbox-footer-actions {
  align-items:center;
  gap:12px;
  margin-left:auto;
  display:flex
}

.lightbox-swipe-hint {
  color:#ffffff4d;
  font-size:11px;
  display:none
}

.lightbox-dots {
  align-items:center;
  gap:6px;
  display:flex
}

.lightbox-dot {
  cursor:pointer;
  background:#ffffff4d;
  border-radius:999px;
  width:6px;
  height:6px;
  padding:0;
  transition:all .2s
}

.lightbox-dot.active {
  background:#fff;
  width:18px
}

@media (width<=768px) {
  .nav-brand,#pill {
  display:none
}

.nav-btn {
  padding:6px 10px;
  font-size:12px
}

.nav-container {
  padding:6px 8px
}

.page {
  padding:90px 16px 80px!important
}

.db-header {
  flex-direction:column;
  gap:8px
}

.db-title {
  font-size:26px!important
}

.stats-row {
  gap:10px;
  grid-template-columns:1fr 1fr!important
}

.db-columns {
  grid-template-columns:1fr!important
}

.stat-tile {
  padding:16px 14px
}

.stat-value {
  font-size:22px
}

.comms-layout {
  min-height:unset;
  grid-template-columns:1fr!important;
  height:auto!important
}

.comms-sidebar {
  border-radius:18px;
  flex-wrap:nowrap;
  gap:6px;
  max-height:160px;
  padding:10px;
  display:flex;
  overflow:auto hidden;
  flex-direction:row!important
}

.sidebar-label {
  display:none
}

.sidebar-project-btn {
  white-space:nowrap;
  border-radius:10px;
  flex-shrink:0;
  width:auto;
  padding:8px 12px
}

.comms-main {
  border-radius:18px;
  min-height:400px
}

.comms-chat-window {
  max-height:340px
}

.image-gallery {
  grid-template-columns:repeat(3,1fr)
}

.projects-grid {
  grid-template-columns:1fr!important
}

.project-panel {
  position:fixed;
  bottom:0;
  right:0;
  border-radius:20px 20px 0 0!important;
  width:100vw!important;
  height:88dvh!important
}

.panel-top {
  padding-top:16px!important
}

.panel-overlay {
  align-items:flex-end;
  z-index:1300;
  background:rgba(15,23,42,0.7)!important
}

.mode-bar {
  flex-wrap:wrap;
  border-radius:16px!important;
  padding:8px!important
}

.mode-btn {
  padding:8px 12px!important;
  font-size:12px!important
}

.invoice-metrics {
  grid-template-columns:1fr 1fr!important
}

.invoice-card-main {
  flex-direction:column;
  gap:10px
}

.invoice-card-right {
  align-items:flex-start
}

.form-grid {
  grid-template-columns:1fr!important
}

.span-2 {
  grid-column:auto!important
}

.field-row {
  grid-template-columns:1fr!important
}

.settings-layout {
  gap:12px
}

.account-info-grid {
  grid-template-columns:1fr!important
}

.settings-action-row {
  flex-direction:column;
  align-items:flex-start;
  gap:10px
}

.login-card {
  border-radius:22px;
  padding:30px 24px 28px
}

.lightbox-nav {
  display:none
}

.lightbox-overlay {
  padding:0!important;
  flex-direction:column!important;
  align-items:stretch!important;
  overflow: hidden;
  height:100dvh!important
}

.lightbox-inner {
  flex:1!important;
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  overflow:visible!important;
  position:static!important;
  gap:0!important
}

.lightbox-close {
  position:absolute!important;
  top:16px!important;
  right:16px!important;
  z-index:999!important;
  width:44px!important;
  height:44px!important;
  background:rgba(0,0,0,0.7)!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important
}

.lightbox-img {
  width:100%!important;
  height:auto!important;
  max-height:calc(100dvh - 130px)!important;
  max-width:100vw!important;
  object-fit:contain!important;
  border-radius:0!important;
  flex:0 0 auto!important;
  display:block!important
}

.lightbox-footer {
  flex-shrink:0!important;
  width:100%!important;
  padding:12px 16px 24px!important;
  background:rgba(0,0,0,0.7)!important;
  border-radius:0!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
  position:relative!important
}

.lightbox-footer-actions {
  justify-content:space-between;
  align-items:center;
  width:100%;
  display:flex
}

.lightbox-swipe-hint {
  display:block
}

.lightbox-counter-row {
  justify-content:space-between;
  align-items:center;
  width:100%;
  display:flex
}

}

@media (width<=480px) {
  .stats-row,.invoice-metrics {
  grid-template-columns:1fr!important
}

.files-grid {
  grid-template-columns:repeat(2,1fr)!important
}

.image-gallery {
  grid-template-columns:repeat(2,1fr)
}

}

.modal-overlay {
  z-index:2000;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  background:#02061773;
  justify-content:center;
  align-items:center;
  padding:20px;
  animation:.15s fadeIn;
  display:flex;
  position:fixed;
  inset:0
}

@keyframes fadeIn {
  0% {
  opacity:0;
  transform:scale(.97)
}

to {
  opacity:1;
  transform:scale(1)
}

}

.modal-card {
  text-align:center;
  border-radius:28px;
  flex-direction:column;
  align-items:center;
  width:min(420px,100%);
  padding:32px 28px 28px;
  animation:.2s cubic-bezier(.16,1,.3,1) slideUp;
  display:flex
}

@keyframes slideUp {
  0% {
  opacity:0;
  transform:translateY(16px)scale(.97)
}

to {
  opacity:1;
  transform:translateY(0)scale(1)
}

}

.modal-icon {
  border-radius:16px;
  justify-content:center;
  align-items:center;
  width:52px;
  height:52px;
  margin-bottom:18px;
  display:flex
}

.modal-icon-warn {
  color:#d97706;
  background:#f59e0b1f
}

.modal-icon-danger {
  color:#dc2626;
  background:#ef44441a
}

.modal-title {
  color:#111;
  letter-spacing:-.02em;
  margin:0 0 8px;
  font-size:19px;
  font-weight:600
}

.modal-desc {
  color:#6e6e73;
  max-width:none;
  margin:0 0 4px;
  font-size:14px;
  line-height:1.55
}

.modal-actions {
  gap:10px;
  width:100%;
  margin-top:22px;
  display:flex
}

.modal-btn-wide {
  flex:1;
  justify-content:center
}

.settings-danger-zone {
  border:1px solid #ef44442e!important
}

.danger-title {
  color:#dc2626!important
}

.btn-delete {
  color:#dc2626;
  cursor:pointer;
  white-space:nowrap;
  background:#ef444414;
  border:1px solid #ef444440;
  border-radius:999px;
  padding:9px 18px;
  font-size:13px;
  font-weight:500;
  transition:all .2s
}

.btn-delete:hover {
  background:#ef444426;
  border-color:#ef444466
}

.btn-delete:disabled {
  opacity:.4;
  pointer-events:none
}

.admin-stats {
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:24px;
  display:grid
}

.admin-stat-pill {
  cursor:pointer;
  text-align:left;
  border-radius:20px;
  padding:18px 20px;
  transition:all .2s
}

.admin-stat-pill:hover {
  transform:translateY(-2px)
}

.admin-stat-pill.active {
  box-shadow:0 0 0 2px #111,0 20px 50px #00000026!important
}

.admin-stat-count {
  color:#111;
  letter-spacing:-.03em;
  font-size:26px;
  font-weight:700;
  line-height:1;
  display:block
}

.admin-stat-label {
  color:#6e6e73;
  text-transform:capitalize;
  margin-top:4px;
  font-size:12px;
  display:block
}

.admin-search-row {
  margin-bottom:16px
}

.admin-search {
  background:#fffc;
  border:1px solid #00000014;
  border-radius:12px;
  outline:none;
  width:100%;
  max-width:320px;
  padding:10px 16px;
  font-size:14px;
  transition:all .2s
}

.admin-search:focus {
  background:#fff;
  border-color:#0003;
  box-shadow:0 0 0 3px #0000000d
}

.admin-table-wrap {
  border-radius:20px;
  padding:0;
  overflow:hidden
}

.admin-table {
  border-collapse:collapse;
  width:100%;
  font-size:13px
}

.admin-table thead tr {
  background:#ffffff80;
  border-bottom:1px solid #0000000f
}

.admin-table th {
  text-align:left;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#9ca3af;
  padding:12px 16px;
  font-size:11px;
  font-weight:600
}

.admin-table td {
  vertical-align:middle;
  border-bottom:1px solid #0000000a;
  padding:14px 16px
}

.admin-table tbody tr:last-child td {
  border-bottom:none
}

.admin-table tbody tr:hover {
  background:#ffffff80
}

.admin-user-cell {
  align-items:center;
  gap:10px;
  display:flex
}

.admin-avatar {
  color:#fff;
  background:#111;
  border-radius:999px;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:32px;
  height:32px;
  font-size:13px;
  font-weight:600;
  display:flex
}

.admin-username {
  color:#111;
  font-size:13px;
  font-weight:500
}

.admin-you-tag {
  color:#9ca3af;
  margin-top:1px;
  font-size:10px
}

.admin-proj-count {
  color:#111;
  background:#0000000d;
  border-radius:999px;
  padding:2px 10px;
  font-size:13px;
  font-weight:600
}

.admin-date {
  color:#9ca3af;
  font-size:12px
}

.admin-role-switcher {
  gap:4px;
  display:flex
}

.admin-role-btn {
  color:#6e6e73;
  cursor:pointer;
  text-transform:capitalize;
  background:#fff9;
  border:1px solid #00000012;
  border-radius:8px;
  padding:5px 10px;
  font-size:11px;
  font-weight:500;
  transition:all .15s
}

.admin-role-btn:hover {
  color:#111;
  background:#0000000f
}

.admin-role-btn.current {
  color:#fff;
  cursor:default;
  background:#111;
  border-color:#0000
}

.admin-role-btn:disabled:not(.current) {
  opacity:.4;
  pointer-events:none
}

.nav-btn {
  position:relative
}

.nav-unread-badge {
  color:#fff;
  vertical-align:middle;
  background:#ef4444;
  border-radius:999px;
  justify-content:center;
  align-items:center;
  min-width:16px;
  height:16px;
  margin-left:5px;
  padding:0 4px;
  font-size:9px;
  font-weight:700;
  line-height:1;
  display:inline-flex
}

.project-progress-wrap {
  align-items:center;
  gap:8px;
  margin-top:10px;
  display:flex
}

.project-progress-bar {
  background:#00000012;
  border-radius:999px;
  flex:1;
  height:4px;
  overflow:hidden
}

.project-progress-fill {
  background:linear-gradient(90deg,#6366f1,#8b5cf6);
  border-radius:999px;
  height:100%;
  transition:width .5s cubic-bezier(.16,1,.3,1)
}

.status-completed .project-progress-fill {
  background:linear-gradient(90deg,#22c55e,#16a34a)
}

.status-review .project-progress-fill {
  background:linear-gradient(90deg,#ec4899,#db2777)
}

.status-in-progress .project-progress-fill {
  background:linear-gradient(90deg,#f59e0b,#d97706)
}

.project-progress-label {
  color:#9ca3af;
  white-space:nowrap;
  font-size:10px;
  font-weight:600
}

.tile-archived {
  opacity:.6;
  filter:grayscale(.3)
}

.tile-archived:hover {
  opacity:.85
}

.badge-overdue {
  color:#dc2626;
  background:#ef44441a
}

.invoice-overdue-card {
  border-left:3px solid #ef444466!important
}

.metric-overdue .metric-val {
  color:#dc2626
}

.metric-overdue {
  border:1px solid #ef444426!important
}

.inv-due-overdue {
  font-weight:600;
  color:#dc2626!important
}

.invoice-doc-actions {
  align-items:center;
  gap:10px;
  display:flex
}

@media (width<=900px) {
  .admin-stats {
  grid-template-columns:repeat(2,1fr)
}

.admin-table {
  font-size:12px
}

.admin-table th,.admin-table td {
  padding:10px 12px
}

.admin-role-switcher {
  flex-wrap:wrap
}

}

@media (width<=600px) {
  .admin-stats {
  grid-template-columns:1fr 1fr
}

.admin-search {
  max-width:100%
}

.admin-table thead {
  display:none
}

.admin-table tr {
  border-bottom:1px solid #0000000f;
  padding:12px 0;
  display:block
}

.admin-table td {
  border-bottom:none;
  justify-content:space-between;
  align-items:center;
  padding:5px 14px;
  display:flex
}

.admin-table td:before {
  content:attr(data-label);
  text-transform:uppercase;
  color:#9ca3af;
  letter-spacing:.05em;
  font-size:10px;
  font-weight:600
}

.invoice-doc-actions {
  flex-direction:column;
  width:100%
}

.invoice-doc-footer {
  flex-direction:column;
  gap:12px
}

}

.dark-toggle {
  color:#6e6e73;
  cursor:pointer;
  background:#ffffff80;
  border:1px solid #ffffffb3;
  border-radius:50%;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:32px;
  height:32px;
  margin-left:4px;
  transition:all .25s;
  display:inline-flex;
  box-shadow:0 2px 8px #00000014,inset 0 1px #ffffffe6
}

.dark-toggle:hover {
  color:#111;
  background:#ffffffe6;
  transform:scale(1.05)
}

:root {
  --bg-primary:#f1f3f9;
  --bg-card:#fff9;
  --bg-card-solid:#fff;
  --border-color:#ffffffb3;
  --text-primary:#111;
  --text-secondary:#6e6e73;
  --text-muted:#9ca3af;
  --input-bg:#ffffffb3;
  --input-border:#0000001a;
  --shadow:#0000001a
}

html.dark-mode {
  --bg-primary:#0d0f14;
  --bg-card:#1e222cd9;
  --bg-card-solid:#1e222c;
  --border-color:#ffffff14;
  --text-primary:#f0f2f8;
  --text-secondary:#9ca3af;
  --text-muted:#6b7280;
  --input-bg:#ffffff0f;
  --input-border:#ffffff1a;
  --shadow:#0006
}

html.dark-mode body {
  color:var(--text-primary);
  background:radial-gradient(1400px 800px at 0 0,#0d1117 0%,#0000 55%),radial-gradient(1200px 800px at 100% 0,#0f1520 0%,#0000 60%),linear-gradient(#0a0c12 0%,#0d0f14 100%)
}

html.dark-mode .liquid {
  background:#1e222cbf;
  border-color:#ffffff12;
  box-shadow:0 30px 70px #0006,inset 0 1px #ffffff0f
}

html.dark-mode .liquid:before {
  opacity:.05
}

html.dark-mode .liquid:after {
  opacity:.06
}

html.dark-mode h1,html.dark-mode h2,html.dark-mode h3,html.dark-mode h4,html.dark-mode .panel-title,html.dark-mode .db-title,html.dark-mode .section-title,html.dark-mode .stat-value {
  color:var(--text-primary)
}

html.dark-mode p,html.dark-mode .text-gray-500,html.dark-mode .text-gray-700 {
  color:var(--text-secondary)
}

html.dark-mode .stat-sub,html.dark-mode .muted-text,html.dark-mode .admin-date {
  color:var(--text-muted)
}

html.dark-mode input,html.dark-mode textarea,html.dark-mode select {
  background:var(--input-bg);
  border-color:var(--input-border);
  color:var(--text-primary)
}

html.dark-mode input::placeholder,html.dark-mode textarea::placeholder {
  color:var(--text-muted)
}

html.dark-mode input:focus,html.dark-mode textarea:focus {
  border-color:#fff3
}

html.dark-mode .glass-select {
  background:var(--input-bg);
  border-color:var(--input-border);
  color:var(--text-primary)
}

html.dark-mode .glass-select option {
  color:var(--text-primary);
  background:#1e222c
}

html.dark-mode .nav-container {
  background:#141820d9;
  border-color:#ffffff12
}

html.dark-mode .nav-brand {
  color:var(--text-primary)
}

html.dark-mode .nav-btn {
  color:var(--text-secondary)
}

html.dark-mode .nav-btn.active,html.dark-mode .nav-btn:hover {
  color:var(--text-primary)
}

html.dark-mode #pill {
  background:#ffffff1a;
  box-shadow:0 2px 8px #0006
}

html.dark-mode .dark-toggle {
  color:#9ca3af;
  background:#ffffff14;
  border-color:#ffffff1a
}

html.dark-mode .dark-toggle:hover {
  color:var(--text-primary);
  background:#ffffff24
}

html.dark-mode .stat-tile,html.dark-mode .project-tile {
  background:#1e222ccc;
  border-color:#ffffff12
}

html.dark-mode .project-tile:hover {
  background:#282e3ae6
}

html.dark-mode .project-progress-bar {
  background:#ffffff14
}

html.dark-mode .timeline-item,html.dark-mode .invoice-row {
  background:#282e3a99;
  border-color:#ffffff0f
}

html.dark-mode .bubble-other .bubble-content {
  color:var(--text-primary);
  background:#282e3ae6
}

html.dark-mode .btn-ghost {
  color:var(--text-secondary);
  border-color:#ffffff1f
}

html.dark-mode .btn-ghost:hover {
  color:var(--text-primary);
  background:#ffffff14
}

html.dark-mode .btn-outline {
  color:var(--text-secondary);
  background:#ffffff0a;
  border-color:#ffffff26
}

html.dark-mode .btn-outline:hover {
  background:#ffffff1a
}

html.dark-mode .filter-chip {
  color:var(--text-secondary);
  background:#ffffff0f;
  border-color:#ffffff1a
}

html.dark-mode .filter-chip.active,html.dark-mode .filter-chip:hover {
  color:var(--text-primary);
  background:#ffffff24
}

html.dark-mode .skeleton-row {
  background:#ffffff0d
}

html.dark-mode .skeleton-row:after {
  background:linear-gradient(90deg,#0000,#ffffff0a,#0000)
}

html.dark-mode .panel-overlay {
  background:#000000b3
}

html.dark-mode .project-panel {
  background:#12161ef7;
  border-color:#ffffff14
}

html.dark-mode .lightbox-overlay {
  background:#000000eb
}

html.dark-mode .admin-table th {
  color:var(--text-muted);
  background:#ffffff0a
}

html.dark-mode .admin-table td {
  border-color:#ffffff0d
}

html.dark-mode .admin-table tr:hover td {
  background:#ffffff08
}

html.dark-mode .admin-row-self td {
  background:#6366f114
}

html.dark-mode .login-card {
  background:#12161ef2;
  border-color:#ffffff14
}

html.dark-mode .login-brand,html.dark-mode .login-title {
  color:var(--text-primary)
}

html.dark-mode .login-sub {
  color:var(--text-secondary)
}

html.dark-mode .email-suggestions {
  background:#1e222c;
  border-color:#ffffff1a
}

html.dark-mode .email-suggestion-item {
  color:var(--text-secondary)
}

html.dark-mode .email-suggestion-item:hover {
  color:var(--text-primary);
  background:#ffffff0f
}

html.dark-mode .notice-toast {
  background:#141820f2;
  border-color:#ffffff1a
}

html.dark-mode .notice-success {
  color:#86efac;
  background:#15803d33;
  border-color:#15803d4d
}

html.dark-mode .notice-error {
  color:#fca5a5;
  background:#b91c1c33;
  border-color:#b91c1c4d
}

html.dark-mode .hero-glow {
  opacity:.4
}

html.dark-mode .glow {
  opacity:.3
}

.activity-row {
  border-bottom:1px solid #0000000d;
  align-items:flex-start;
  gap:12px;
  padding:14px 20px;
  transition:background .15s;
  display:flex
}

.activity-row:last-child {
  border-bottom:none
}

.activity-row:hover {
  background:#00000005
}

.activity-dot {
  background:#6366f1;
  border-radius:50%;
  flex-shrink:0;
  width:8px;
  height:8px;
  margin-top:5px
}

.activity-body {
  flex:1;
  min-width:0
}

.activity-author {
  color:#111;
  font-size:13px;
  font-weight:600
}

.activity-text {
  color:#6e6e73;
  font-size:13px
}

.activity-project {
  color:#374151;
  font-size:13px;
  font-weight:500
}

.activity-note {
  color:#9ca3af;
  white-space:nowrap;
  text-overflow:ellipsis;
  max-width:420px;
  margin-top:3px;
  font-size:12px;
  overflow:hidden
}

.activity-time {
  color:#9ca3af;
  white-space:nowrap;
  flex-shrink:0;
  font-size:11px
}

html.dark-mode .activity-row:hover {
  background:#ffffff05
}

html.dark-mode .activity-author {
  color:var(--text-primary)
}

html.dark-mode .activity-project {
  color:var(--text-secondary)
}

html.dark-mode .activity-row {
  border-color:#ffffff0d
}

.file-preview-overlay {
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  z-index:9000;
  background:#000000b3;
  justify-content:center;
  align-items:center;
  padding:24px;
  animation:.2s fadeIn;
  display:flex;
  position:fixed;
  inset:0
}

.file-preview-modal {
  background:#fff;
  border-radius:20px;
  flex-direction:column;
  width:100%;
  max-width:900px;
  max-height:90vh;
  display:flex;
  overflow:hidden;
  box-shadow:0 40px 100px #0006
}

.file-preview-header {
  border-bottom:1px solid #f0f0f0;
  flex-shrink:0;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  display:flex
}

.file-preview-name {
  color:#111;
  white-space:nowrap;
  text-overflow:ellipsis;
  max-width:60%;
  font-size:14px;
  font-weight:600;
  overflow:hidden
}

.file-preview-body {
  background:#f8f9fb;
  flex:1;
  justify-content:center;
  align-items:center;
  padding:20px;
  display:flex;
  overflow:auto
}

html.dark-mode .file-preview-modal {
  background:#1e222c
}

html.dark-mode .file-preview-header {
  border-color:#ffffff14
}

html.dark-mode .file-preview-name {
  color:var(--text-primary)
}

html.dark-mode .file-preview-body {
  background:#ffffff08
}

.admin-user-row {
  border-bottom:1px solid #0000000d
}

.admin-user-row:last-child {
  border-bottom:none
}

.admin-main-row {
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 20px;
  transition:background .15s;
  display:flex
}

.admin-main-row:hover {
  background:#00000005
}

.admin-row-self {
  background:#6366f10a
}

.admin-expand-panel {
  background:#00000004;
  border-top:1px solid #0000000f;
  flex-direction:column;
  gap:20px;
  padding:20px 24px 24px;
  display:flex
}

.admin-expand-label {
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9ca3af;
  margin-bottom:8px;
  font-size:11px;
  font-weight:700
}

.admin-plan-badge {
  color:#4f46e5;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:#6366f11a;
  border:1px solid #6366f133;
  border-radius:999px;
  padding:2px 8px;
  font-size:10px;
  font-weight:600;
  display:inline-block
}

.admin-updates-badge {
  color:#15803d;
  letter-spacing:.04em;
  background:#15803d14;
  border:1px solid #15803d33;
  border-radius:999px;
  padding:2px 8px;
  font-size:10px;
  font-weight:600;
  display:inline-block
}

.admin-toggle-row {
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  align-items:center;
  gap:10px;
  display:flex
}

.admin-toggle {
  cursor:pointer;
  background:#0000001a;
  border-radius:999px;
  flex-shrink:0;
  width:40px;
  height:24px;
  transition:background .25s;
  position:relative
}

.admin-toggle.on {
  background:#15803d
}

.admin-toggle-knob {
  background:#fff;
  border-radius:50%;
  width:18px;
  height:18px;
  transition:transform .25s;
  position:absolute;
  top:3px;
  left:3px;
  box-shadow:0 1px 4px #0003
}

.admin-toggle.on .admin-toggle-knob {
  transform:translate(16px)
}

.admin-notes-textarea {
  resize:vertical;
  color:#111;
  background:#fffc;
  border:1px solid #0000001a;
  border-radius:12px;
  width:100%;
  min-height:80px;
  padding:12px 14px;
  font-family:inherit;
  font-size:13px;
  line-height:1.6;
  transition:border-color .2s
}

.admin-notes-textarea:focus {
  background:#fffffff2;
  border-color:#00000040;
  outline:none
}

.admin-notes-textarea::placeholder {
  color:#9ca3af
}

.page-enter {
  animation:.18s cubic-bezier(.22,1,.36,1) forwards pageEnter
}

@keyframes pageEnter {
  0% {
  opacity:0;
  transform:translateY(12px)
}

to {
  opacity:1;
  transform:translateY(0)
}

}

.skeleton {
  background:linear-gradient(90deg,#0000000f 25%,#0000001a 50%,#0000000f 75%) 0 0/200% 100%;
  border-radius:8px;
  animation:1.4s ease-in-out infinite shimmer
}

.skeleton-invoice-card {
  background:#ffffffb3;
  border:1px solid #0000000f;
  border-radius:16px;
  margin-bottom:10px;
  padding:20px
}

.skeleton-invoice-card .sk-line {
  border-radius:6px;
  height:12px;
  margin-bottom:8px
}

.skeleton-invoice-card .sk-line.sk-title {
  width:45%;
  height:14px
}

.skeleton-invoice-card .sk-line.sk-sub {
  width:30%
}

.skeleton-invoice-card .sk-line.sk-desc {
  width:60%
}

.skeleton-invoice-card .sk-amount {
  float:right;
  border-radius:6px;
  width:80px;
  height:22px;
  margin-top:-46px
}

.skeleton-project-card {
  background:#ffffffb3;
  border:1px solid #0000000f;
  border-radius:16px;
  align-items:center;
  gap:16px;
  margin-bottom:10px;
  padding:20px 24px;
  display:flex
}

.skeleton-project-card .sk-badge {
  border-radius:999px;
  flex-shrink:0;
  width:64px;
  height:22px
}

.skeleton-project-card .sk-content {
  flex:1
}

.skeleton-user-row {
  border-bottom:1px solid #0000000d;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  display:flex
}

.skeleton-user-row .sk-avatar {
  border-radius:50%;
  flex-shrink:0;
  width:32px;
  height:32px
}

.skeleton-user-row .sk-name {
  border-radius:6px;
  width:140px;
  height:13px
}

.pwa-banner {
  z-index:9999;
  -webkit-backdrop-filter:blur(20px)saturate(180%);
  opacity:0;
  background:#ffffffeb;
  border:1px solid #ffffffd9;
  border-radius:20px;
  align-items:center;
  gap:14px;
  width:calc(100vw - 48px);
  max-width:360px;
  padding:14px 18px;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s;
  display:flex;
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translate(-50%)translateY(120px);
  box-shadow:0 20px 60px #0000002e,inset 0 1px #ffffffe6
}

.pwa-banner.pwa-visible {
  opacity:1;
  transform:translate(-50%)translateY(0)
}

.pwa-banner.pwa-hiding {
  opacity:0;
  transform:translate(-50%)translateY(120px)
}

.pwa-icon {
  border-radius:10px;
  flex-shrink:0;
  width:44px;
  height:44px
}

.pwa-text {
  flex:1
}

.pwa-title {
  color:#0b1220;
  margin-bottom:2px;
  font-size:13px;
  font-weight:700
}

.pwa-sub {
  color:#9ca3af;
  font-size:11px;
  line-height:1.4
}

.pwa-install {
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
  background:#0b1220;
  border:none;
  border-radius:999px;
  flex-shrink:0;
  padding:8px 16px;
  font-size:12px;
  font-weight:600
}

.pwa-dismiss {
  color:#9ca3af;
  cursor:pointer;
  background:0 0;
  border:none;
  flex-shrink:0;
  padding:2px;
  font-size:18px;
  line-height:1
}

@media (max-width: 768px) {
  button.lightbox-close {
    position: fixed !important;

    top: calc(80px + env(safe-area-inset-top)) !important; /* below navbar */
    right: 12px !important;

    left: auto !important;
    bottom: auto !important;

    transform: none !important;
  }
}

@media (width<=768px) {
  .lightbox-overlay {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }
}