/* ============================================================
   FILES4LAB — Design System
   Sail4Lab · Light theme · Gradient palette from the S4 laB mark
   ============================================================ */

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

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

/* ------------------------------------------------------------
   TOKENS
   The AR Layer palette, sampled from the Augmented Cool mark:
     magenta #c248c8  →  purple #7855d0  →  green #45aa6e

   Class names match the light theme exactly, so the two stylesheets
   are interchangeable and no PHP has to know which one is in use.
   ------------------------------------------------------------ */
:root {
  /* Brand */
  --brand-purple:   #c248c8;   /* magenta — gradient start */
  --brand-violet:   #7855d0;   /* purple  — primary interactive colour */
  --brand-indigo:   #5b46b8;
  --brand-navy:     #45aa6e;   /* green   — gradient end */
  --brand-light:    #d47ad8;

  --gradient:        linear-gradient(115deg, #c248c8 0%, #7855d0 48%, #45aa6e 100%);
  --gradient-soft:   linear-gradient(115deg, rgba(194,72,200,.16) 0%, rgba(120,85,208,.16) 48%, rgba(69,170,110,.16) 100%);
  --gradient-hair:   linear-gradient(90deg, #c248c8, #7855d0 48%, #45aa6e);

  /* Surfaces — the deep indigo ground, never pure black */
  --bg:             #0a0814;
  --surface-1:      #0f0f17;
  --surface-2:      #13131d;
  --surface-3:      #1c1c28;
  --surface-input:  #13131d;

  /* Borders */
  --border:         rgba(255,255,255,.075);
  --border-strong:  rgba(255,255,255,.15);
  --border-focus:   #7855d0;

  /* Text */
  --text-primary:   #e8e8f0;
  --text-secondary: #9a9ab2;
  --text-muted:     #6e6e88;
  --text-faint:     #44445a;
  --text-on-brand:  #ffffff;

  /* Semantic, lifted for a dark ground */
  --success:        #4fc98a;
  --success-bg:     rgba(69,170,110,.13);
  --warning:        #e0a545;
  --warning-bg:     rgba(224,165,69,.13);
  --danger:         #f0697f;
  --danger-bg:      rgba(240,105,127,.12);
  --info:           #9b7ce8;
  --info-bg:        rgba(120,85,208,.15);

  /* Role colours */
  --role-admin:     #45aa6e;
  --role-team:      #9b7ce8;
  --role-extern:    #d47ad8;

  /* Type — carried over, so the two products read as siblings */
  --font-ui:   'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Space Mono', 'SF Mono', Menlo, monospace;

  /* Elevation. On a dark ground a shadow reads as depth only when it is
     considerably darker than the surface it falls on. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 2px 10px rgba(0,0,0,.45);
  --shadow-md: 0 6px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.6);
  --shadow-brand: 0 6px 24px rgba(120,85,208,.35);

  /* Geometry */
  --r-sm: 6px;
  --r:    10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
}

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ------------------------------------------------------------
   THE AR LAYER

   Three slow plasma blooms and a fine scanline grid. The point is a
   surface that feels alive without ever competing with the reading:
   nothing moves fast, nothing crosses the text, and the whole thing
   sits behind everything at negative depth.
   ------------------------------------------------------------ */
body::before {
  content: '';
  position: fixed;
  inset: -20vh -20vw;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 14% 12%, rgba(194,72,200,.20), transparent 62%),
    radial-gradient(34vw 34vw at 88% 22%, rgba(120,85,208,.17), transparent 60%),
    radial-gradient(30vw 30vw at 62% 92%, rgba(69,170,110,.11), transparent 62%);
  filter: blur(48px);
  animation: arDrift 34s ease-in-out infinite alternate;
}

/* Scanlines, and a vignette that pulls the eye to the middle. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent, transparent 3px,
      rgba(255,255,255,.011) 3px, rgba(255,255,255,.011) 4px
    ),
    radial-gradient(ellipse at 50% 44%, transparent 0%, rgba(10,8,20,.55) 100%);
}

@keyframes arDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5vw, -1.5vh, 0) scale(1.06); }
  100% { transform: translate3d(-2vw, 2vh, 0) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 62px;
  padding: 0 28px;
  background: rgba(10,8,20,.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gradient-hair);
  opacity: .85;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  color: var(--text-primary);
}
.header-brand img { height: 30px; }

.header-brand__divider {
  width: 1px;
  height: 20px;
  background: var(--border-strong);
}
.header-brand__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.header-nav { display: flex; align-items: center; gap: 4px; }

.header-nav a {
  padding: 7px 14px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color .15s, background .15s;
}
.header-nav a:hover { color: var(--text-primary); background: var(--surface-2); }
.header-nav a.is-current {
  color: var(--brand-violet);
  background: var(--info-bg);
  font-weight: 600;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 28px 80px;
}
.container--narrow { max-width: 780px; }
.container--wide   { max-width: 1400px; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.page-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--text-primary);
}
.page-subtitle {
  margin-top: 5px;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.breadcrumb a:hover { color: var(--brand-violet); }
.breadcrumb__sep { color: var(--text-faint); }

/* Gradient hairline divider */
.rule {
  height: 2px;
  border: none;
  border-radius: 2px;
  background: var(--gradient-hair);
  opacity: .55;
  margin: 26px 0;
}
.rule--soft { opacity: .22; height: 1px; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.card--flush { padding: 0; overflow: hidden; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.card-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-primary);
}
.card-subtitle {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 3px;
}

/* Card with gradient top edge — used for primary panels */
.card--accent { position: relative; overflow: hidden; }
.card--accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-hair);
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  position: relative;
  padding: 20px 20px 18px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-hair);
  opacity: .9;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
  margin-bottom: 7px;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   PROJECT & PART TREE
   ============================================================ */
.project-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, border-color .18s;
}
.project-card:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }

.project-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  background: var(--surface-1);
  border-bottom: 1px solid transparent;
  transition: background .15s;
}
.project-card.is-open .project-head {
  border-bottom-color: var(--border);
  background: var(--bg);
}
.project-head:hover { background: var(--surface-2); }

.project-marker {
  width: 4px;
  align-self: stretch;
  min-height: 34px;
  border-radius: 3px;
  background: var(--gradient);
  flex-shrink: 0;
}

/* Row thumbnail: sized to the row, so adding it never pushes the layout. */
.project-thumb {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.project-thumb img { width: 100%; height: 100%; object-fit: cover; }

.project-thumb--fallback {
  background: var(--gradient);
  border-color: transparent;
  color: rgba(255,255,255,.92);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

.project-name {
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-primary);
}
.project-desc {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 2px;
}

.project-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.project-chevron {
  flex-shrink: 0;
  color: var(--text-faint);
  transition: transform .22s, color .18s;
}
.project-card.is-open .project-chevron {
  transform: rotate(90deg);
  color: var(--brand-violet);
}

.project-body { display: none; padding: 6px 20px 16px; }
.project-card.is-open .project-body { display: block; }

/* ============================================================
   TOOL PANELS

   One treatment, one meaning: a panel that CREATES or CHANGES something
   sits on a tinted surface with a brand edge and a small label.

   Deliberately NOT used for lists, tables, cards or the viewer. If half
   the page were tinted the distinction would stop carrying information,
   which is the usual way this idea fails.

   The label matters as much as the tint: colour alone is a weak signal
   for anyone with low contrast vision.
   ============================================================ */
.tool-panel {
  position: relative;
  padding: 22px 24px 24px;
  margin-bottom: 22px;
  border-radius: var(--r-md);
  border: 1px solid rgba(120,85,208,.26);
  background:
    linear-gradient(180deg, rgba(120,85,208,.11), rgba(120,85,208,.03) 90px),
    var(--surface-2);
  transition: box-shadow .3s, border-color .3s;
}

/* The left edge carries the brand line, so the panel reads as "a tool"
   even before the label is read. */
.tool-panel::before {
  content: '';
  position: absolute;
  top: 14px; bottom: 14px; left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--gradient);
}

.tool-panel__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-violet);
  margin-bottom: 12px;
}

/* When a button elsewhere on the page sends you here, say so briefly. */
.tool-panel.is-called {
  border-color: var(--brand-violet);
  box-shadow: 0 0 0 4px rgba(120,85,208,.28);
}

.tool-panel .card-head { margin-bottom: 18px; }

/* Inline "add something here" affordance at the foot of a list. */
.pcard__add {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--border-strong);
  background: transparent;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.pcard__add:hover {
  border-style: solid;
  border-color: var(--brand-violet);
  color: var(--brand-violet);
  background: var(--info-bg);
}

@media (prefers-reduced-motion: reduce) {
  .tool-panel { transition: none; }
}

/* ============================================================
   PROJECT PAGE  —  main card and part cards
   The project as a whole sits full width at the top; its parts follow
   as their own cards, so the shape of the project is visible at a glance.
   ============================================================ */
.pcard {
  background: var(--surface-1);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  transition: border-color .16s, box-shadow .16s;
}
.pcard:hover { box-shadow: var(--shadow); }

/* The main card leads: a heavier edge and the brand line across the top. */
.pcard--main {
  position: relative;
  border-color: var(--brand-violet);
  box-shadow: var(--shadow-md);
  margin-bottom: 28px;
}
.pcard--main::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient);
}

.pcard__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.pcard--main .pcard__head { background: var(--surface-2); }

.pcard__thumb {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.pcard__thumb img { width: 100%; height: 100%; object-fit: cover; }

.pcard__thumb--fallback {
  background: var(--gradient);
  border-color: transparent;
  color: rgba(255,255,255,.92);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
}
.pcard__thumb--soft {
  background: var(--gradient-soft);
  border-color: rgba(79,27,204,.18);
  color: var(--brand-violet);
}

.pcard__titles { flex: 1; min-width: 0; }
.pcard__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
}
.pcard--main .pcard__title { font-size: 17px; font-weight: 700; }
.pcard__sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.pcard__tools {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.pcard__body { padding: 6px 14px 12px; }
.pcard--main .pcard__body { padding: 8px 16px 14px; }

.pcard__empty {
  padding: 16px 6px;
  font-size: 13px;
  color: var(--text-faint);
}

.pcard__picform {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}
.pcard__picform label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Parts sit two across on a wide screen, one on a narrow one. */
.pcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  align-items: start;
}
.pcard-grid .pcard { margin-bottom: 0; }

.page-head__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .pcard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .page-head__actions { width: 100%; }
}

/* ---- Pointer to documents shared outside any project ---- */
.shared-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  margin-bottom: 22px;
  border-radius: var(--r-md);
  border: 1px solid rgba(79,27,204,.22);
  background: var(--info-bg);
  font-size: 13.5px;
  color: var(--text-primary);
  transition: border-color .16s, background .16s;
}
.shared-banner:hover {
  border-color: var(--brand-violet);
  background: rgba(120,85,208,.22);
}
.shared-banner__icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--gradient);
  color: #fff;
}
.shared-banner__go {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-weight: 600;
  color: var(--brand-violet);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .shared-banner { flex-wrap: wrap; }
  .shared-banner__go { margin-left: 0; }
}

/* ============================================================
   PROJECT CARDS  (the home page)
   Picture, name, who is in it, what it covers, and its parts.
   Documents are deliberately absent — the project page has those.
   ============================================================ */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.proj-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  /* A visible edge, so each project reads as its own object rather than
     as one long column of text. */
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.proj-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-violet);
}

/* ---- Thumbnail beside the name ---- */
.proj-card__head {
  display: flex;
  align-items: center;
  gap: 13px;
}

.proj-card__thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: block;
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
}
.proj-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No picture yet: initials on the brand gradient read as deliberate,
   not as a broken image. */
.proj-card__thumb-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--gradient);
  color: rgba(255,255,255,.92);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ---- Body ---- */
.proj-card__body {
  flex: 1;
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.proj-card__name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.25;
}
.proj-card__name a { transition: color .15s; }
.proj-card__name a:hover { color: var(--brand-violet); }

.proj-card__people {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.proj-card__people-edit {
  width: 26px;
  height: 26px;
  margin-left: 4px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.proj-card__people-edit:hover {
  border-color: var(--brand-violet);
  border-style: solid;
  color: var(--brand-violet);
  background: var(--info-bg);
}

.proj-card__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---- Parts, titles only ---- */
.proj-card__parts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.proj-card__parts li {
  position: relative;
  padding: 5px 0 5px 16px;
  font-size: 13px;
}
.proj-card__parts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gradient);
  opacity: .65;
}
.proj-card__parts a { color: var(--text-primary); transition: color .15s; }
.proj-card__parts a:hover { color: var(--brand-violet); }

.proj-card__noparts {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-faint);
}

/* ---- Footer ---- */
.proj-card__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}
.proj-card__count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.proj-card__owner {
  flex: 1;
  font-size: 11.5px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proj-card__foot .btn { margin-left: auto; }
.proj-card__owner + .btn { margin-left: 0; }

/* ---- Members inside the dialog ---- */
.member-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.member-list__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.member-list__row:last-child { border-bottom: none; padding-bottom: 0; }
.member-list__row .people-dot { margin-left: 0; }
.member-list__name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
}

@media (max-width: 560px) {
  .proj-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Membership shown in the project list ---- */
.project-people {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-right: 6px;
}

.people-dot {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(140deg, #6c6c85, #55556e);
  border: 2px solid var(--surface-1);
  margin-left: -7px;
  cursor: default;
}
.people-dot:first-child { margin-left: 0; }

/* Members who may take a copy away are marked in the brand gradient. */
.people-dot.can-dl { background: var(--gradient); }

.people-dot.people-more {
  background: var(--surface-3);
  color: var(--text-secondary);
}

.people-none {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---- Membership detail, once a project is expanded ---- */
.project-share {
  padding: 14px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 14px;
}
.project-share__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.project-share__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.member-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}
.member-chip .people-dot { margin-left: 0; }
.member-chip strong { font-weight: 600; }
.member-chip .u-muted { font-size: 12px; }

@media (max-width: 700px) {
  .project-people { display: none; }
}

/* Parts nested inside a project */
.part-block { margin-top: 12px; }

.part-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 8px 14px;
  border-left: 2px solid var(--border-strong);
  cursor: pointer;
}
.part-head:hover { border-left-color: var(--brand-violet); }

.part-name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.part-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--text-muted);
}

/* ============================================================
   FILE ROWS
   ============================================================ */
.file-list { margin-left: 14px; }

.file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border-bottom: 1px solid var(--border);
  transition: background .14s;
}
.file-row:last-child { border-bottom: none; }
.file-row:hover { background: var(--surface-1); }

/* Rows that carry a destination behave like one big link. */
.file-row[data-href] { cursor: pointer; }
.file-row[data-href]:hover .file-title { color: var(--brand-violet); }

.file-title { transition: color .14s; display: block; }
a.file-title:focus-visible {
  outline: 2px solid var(--brand-violet);
  outline-offset: 2px;
  border-radius: 3px;
}

.file-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
}
.file-icon--pdf   { background: linear-gradient(140deg, #8c2340, #b5253c); }
.file-icon--video { background: linear-gradient(140deg, #5a2284, #4f1bcc); }
.file-icon--sheet { background: linear-gradient(140deg, #14603f, #1a7f52); }
.file-icon--image { background: linear-gradient(140deg, #0702a1, #00008b); }
.file-icon--other { background: linear-gradient(140deg, #6c6c85, #55556e); }

.file-info { flex: 1; min-width: 0; }
.file-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.file-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-brand    { background: var(--info-bg);    color: var(--brand-violet); border: 1px solid rgba(79,27,204,.2); }
.badge-active   { background: var(--success-bg); color: var(--success);      border: 1px solid rgba(26,127,82,.22); }
.badge-inactive { background: var(--surface-2);  color: var(--text-muted);   border: 1px solid var(--border); }
.badge-warning  { background: var(--warning-bg); color: var(--warning);      border: 1px solid rgba(154,97,0,.22); }
.badge-danger   { background: var(--danger-bg);  color: var(--danger);       border: 1px solid rgba(181,37,60,.22); }

/* Role badges */
.badge-role-admin  { background: rgba(0,0,139,.09);   color: var(--role-admin);  border: 1px solid rgba(0,0,139,.2); }
.badge-role-team   { background: rgba(79,27,204,.09); color: var(--role-team);   border: 1px solid rgba(79,27,204,.2); }
.badge-role-extern { background: rgba(90,34,132,.09); color: var(--role-extern); border: 1px solid rgba(90,34,132,.2); }

/* Permission chips */
.perm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.perm-chip.is-on {
  background: var(--info-bg);
  color: var(--brand-violet);
  border-color: rgba(79,27,204,.25);
}

/* Version pill */
.version-pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  background: var(--gradient);
  color: #fff;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--r);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .12s, box-shadow .16s, background .16s, border-color .16s, opacity .16s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--gradient);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover { opacity: .93; box-shadow: 0 8px 30px rgba(120,85,208,.45); }

.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}
.btn-outline:hover {
  color: var(--brand-violet);
  border-color: var(--brand-violet);
  background: var(--info-bg);
}

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text-primary); }

.btn-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(181,37,60,.25);
}
.btn-danger:hover { background: rgba(240,105,127,.2); }

.btn-success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(26,127,82,.25);
}

.btn-sm { padding: 6px 13px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn-xs { padding: 4px 10px; font-size: 11.5px; border-radius: var(--r-sm); }
.btn-block { width: 100%; }

.btn-group { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.btn-icon {
  width: 32px; height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  border: 1px solid transparent;
}
.btn-icon:hover {
  background: var(--surface-2);
  color: var(--brand-violet);
  border-color: var(--border);
}

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: 18px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group label,
.form-label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-control {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: border-color .16s, box-shadow .16s;
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(120,85,208,.25);
}

select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236e6e88' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

textarea.form-control { resize: vertical; min-height: 92px; line-height: 1.6; }

.form-hint {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.form-check input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--brand-violet);
  cursor: pointer;
}
.form-check label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
  cursor: pointer;
}

/* File drop zone */
.dropzone {
  padding: 30px 22px;
  text-align: center;
  background: var(--surface-1);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.dropzone:hover, .dropzone.is-dragover {
  border-color: var(--brand-violet);
  background: var(--info-bg);
}
.dropzone__icon { margin-bottom: 10px; color: var(--brand-violet); }
.dropzone__hint { margin-top: 5px; font-size: 11.5px; color: var(--text-muted); }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

thead th {
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1.5px solid var(--border-strong);
}

tbody td {
  padding: 13px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
tbody tr { transition: background .13s; }
tbody tr:hover { background: var(--surface-1); }
tbody tr:last-child td { border-bottom: none; }

code {
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  padding: 13px 18px;
  margin-bottom: 22px;
  border-radius: var(--r);
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid transparent;
}
.alert-success { background: var(--success-bg); color: var(--success); border-color: rgba(26,127,82,.22); }
.alert-danger  { background: var(--danger-bg);  color: var(--danger);  border-color: rgba(181,37,60,.22); }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(154,97,0,.22); }
.alert-info    { background: var(--info-bg);    color: var(--brand-violet); border-color: rgba(79,27,204,.22); }

/* ============================================================
   PERMISSION MATRIX
   ============================================================ */
.perm-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }

.perm-matrix th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 9px 12px;
  background: var(--surface-1);
  border-bottom: 1.5px solid var(--border-strong);
}
.perm-matrix th:first-child { text-align: left; }
.perm-matrix th:not(:first-child) { text-align: center; width: 92px; }

.perm-matrix td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.perm-matrix td:not(:first-child) { text-align: center; }

.perm-scope {
  display: flex;
  align-items: center;
  gap: 9px;
}
.perm-scope--part { padding-left: 22px; }
.perm-scope--file { padding-left: 44px; }

.perm-scope__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--gradient);
}
.perm-scope--file .perm-scope__dot { background: var(--text-faint); }

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 36px; height: 20px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle__track {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  transition: background .2s, border-color .2s;
}
.toggle__track::before {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #e8e8f0;
  box-shadow: var(--shadow-sm);
  transition: transform .2s;
}
.toggle input:checked + .toggle__track {
  background: var(--gradient);
  border-color: transparent;
}
.toggle input:checked + .toggle__track::before { transform: translateX(16px); }

/* Inherited-permission marker */
.perm-inherited {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* ============================================================
   VERSION HISTORY
   ============================================================ */
.version-list { position: relative; padding-left: 24px; }
.version-list::before {
  content: '';
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--brand-violet), var(--border));
}

.version-item { position: relative; padding: 11px 0; }
.version-item::before {
  content: '';
  position: absolute;
  left: -23px; top: 17px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 2px solid var(--border-strong);
}
.version-item.is-current::before {
  background: var(--brand-violet);
  border-color: var(--brand-violet);
  box-shadow: 0 0 0 3px rgba(79,27,204,.16);
}

.version-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 3px;
}
.version-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--brand-violet);
}
.version-date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.version-note { font-size: 12.5px; color: var(--text-secondary); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  padding: 54px 26px;
  text-align: center;
  color: var(--text-muted);
}
.empty-state__icon {
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--gradient-soft);
  color: var(--brand-violet);
}
.empty-state__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.empty-state__text { font-size: 13px; max-width: 380px; margin: 0 auto; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4,3,10,.72);
  backdrop-filter: blur(6px);
  animation: fadeIn .18s ease both;
}

/* The HTML hidden attribute only carries display:none at the lowest possible
   specificity, so any display rule above would beat it. Restate it here. */
.modal-overlay[hidden],
[hidden] { display: none !important; }
.modal {
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface-1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: modalIn .22s cubic-bezier(.2,.8,.3,1) both;
}
.modal__head {
  position: relative;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--border);
}
.modal__head::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--gradient-hair);
}
.modal__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.modal__body { padding: 22px 26px; }
.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 26px 22px;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  padding: 40px 36px;
  background: rgba(15,15,23,.9);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-hair);
}
.login-logo { display: grid; place-items: center; margin-bottom: 26px; }
.login-logo img { height: 62px; }
.login-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}
.login-subtitle {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.u-gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.u-mono   { font-family: var(--font-mono); }
.u-muted  { color: var(--text-muted); }
.u-small  { font-size: 12px; }
.u-nowrap { white-space: nowrap; }
.u-flex   { display: flex; align-items: center; gap: 10px; }
.u-between{ display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.u-spacer { flex: 1; }
.u-mt-0 { margin-top: 0; }  .u-mb-0 { margin-bottom: 0; }
.u-mt-1 { margin-top: 8px; } .u-mb-1 { margin-bottom: 8px; }
.u-mt-2 { margin-top: 16px; } .u-mb-2 { margin-bottom: 16px; }
.u-mt-3 { margin-top: 24px; } .u-mb-3 { margin-bottom: 24px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 768px) {
  .header { height: auto; flex-wrap: wrap; gap: 10px; padding: 12px 18px; }
  .header-nav { gap: 2px; }
  .header-nav a { padding: 6px 11px; font-size: 12.5px; }
  .container { padding: 22px 18px 60px; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-title { font-size: 21px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .stat-card { padding: 16px 15px; }
  .stat-value { font-size: 26px; }
  .card { padding: 18px; }
  .file-meta { display: none; }
  .btn-group { width: 100%; }
  .perm-scope--part { padding-left: 14px; }
  .perm-scope--file { padding-left: 28px; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .project-meta { display: none; }
}

@media print {
  .header, .btn, .btn-group, .file-actions { display: none !important; }
  body::before, body::after { display: none; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border-color: #ccc; background: #fff; }
}