:root{
  --bone:#FAFAF7; --panel:#F2F1EC; --border:#E5E3DC;
  --ink:#111111; --muted:#6E6E68; --amber:#B8761F; --amber-dk:#8E5812;
  --error:#A8342E;
  --font-sans:'Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',monospace;
  --radius:12px; --radius-sm:9px; --radius-xs:6px;
  --shadow-card:0 1px 3px rgba(0,0,0,.06), 0 0 0 1px var(--border);
  --shadow-login:0 2px 8px rgba(0,0,0,.07), 0 0 0 1px var(--border);
  --transition:160ms cubic-bezier(.25,.46,.45,.94);
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* subtle grain overlay on the whole viewport */
body{
  margin:0;
  background-color:var(--bone);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:var(--font-sans);
  line-height:1.55;
}

/* ─── Wordmark ─────────────────────────────────────────── */
.wordmark{
  font-weight:700;
  letter-spacing:.2em;
  font-size:1.25rem;
  text-transform:uppercase;
  position:relative;
  display:inline-block;
  padding-bottom:3px;
}
.wordmark::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:100%; height:2px;
  background:var(--amber);
  border-radius:1px;
}
.wordmark.sm{font-size:1rem}

/* ─── Login ────────────────────────────────────────────── */
.login-wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  padding:1.5rem;
}
.login-card{
  background:#fff;
  border-radius:16px;
  padding:2.75rem 2.5rem;
  width:100%;
  max-width:380px;
  text-align:center;
  box-shadow:var(--shadow-login);
  animation:fade-up .35s cubic-bezier(.25,.46,.45,.94) both;
}
.login-logo{
  width:168px;
  height:auto;
  display:inline-block;
}
.login-lead{
  color:var(--muted);
  font-size:.95rem;
  margin:1.1rem 0 1.75rem;
  line-height:1.6;
}
.login-form{display:flex;flex-direction:column;gap:.75rem}
.pw-input{
  padding:.8rem 1rem;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:1rem;
  font-family:var(--font-sans);
  background:var(--bone);
  color:var(--ink);
  transition:border-color var(--transition), box-shadow var(--transition);
}
.pw-input::placeholder{color:var(--muted)}
.pw-input:focus{
  outline:none;
  border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(184,118,31,.12);
}
.form-error{
  color:var(--error);
  font-size:.88rem;
  margin:0;
  padding:.55rem .75rem;
  background:rgba(168,52,46,.07);
  border:1px solid rgba(168,52,46,.2);
  border-radius:var(--radius-xs);
  text-align:left;
}
.login-foot{
  color:var(--muted);
  font-size:.78rem;
  font-family:var(--font-mono);
  letter-spacing:.04em;
}

/* ─── Buttons ──────────────────────────────────────────── */
.btn-primary{
  background:var(--amber);
  color:#fff;
  border:none;
  border-radius:var(--radius-sm);
  padding:.75rem 1.25rem;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  font-family:var(--font-sans);
  transition:background var(--transition), transform 80ms ease;
  letter-spacing:.01em;
}
.btn-primary:hover{background:var(--amber-dk)}
.btn-primary:active{transform:scale(.98)}
.btn-primary.sm{padding:.42rem .9rem;font-size:.83rem;border-radius:8px}

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--border);
  border-radius:8px;
  padding:.42rem .9rem;
  font-size:.83rem;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  font-family:var(--font-sans);
  transition:border-color var(--transition), color var(--transition), background var(--transition);
}
.btn-ghost:hover{
  border-color:var(--muted);
  background:var(--panel);
}
.btn-danger{
  background:transparent;
  color:#A8342E;
  border:1.5px solid rgba(168,52,46,.35);
  border-radius:8px;
  padding:.42rem .9rem;
  font-size:.83rem;
  cursor:pointer;
  font-family:var(--font-sans);
  transition:border-color var(--transition), color var(--transition), background var(--transition);
}
.btn-danger:hover{
  background:#A8342E;
  color:#fff;
  border-color:#A8342E;
}
/* keep the per-card delete form inline with the other actions */
.card-actions form{display:inline;margin:0}

/* ─── Topbar ───────────────────────────────────────────── */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.875rem 1.5rem;
  border-bottom:1px solid var(--border);
  background:rgba(250,250,247,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  position:sticky;
  top:0;
  z-index:10;
}
.topbar-right{display:flex;align-items:center;gap:1rem}
.client-name{font-weight:600;font-size:.9rem;color:var(--muted)}

/* ─── Library ──────────────────────────────────────────── */
.library{
  max-width:1020px;
  margin:0 auto;
  padding:2.25rem 1.5rem 3rem;
}
.doc-section{margin-bottom:2.75rem}
.doc-section.internal{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.35rem;
}
.section-title{
  font-size:1rem;
  font-weight:700;
  margin:0 0 1.1rem;
  display:flex;
  align-items:center;
  gap:.6rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--muted);
}
.lock{
  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--muted);
  font-weight:400;
  text-transform:none;
  letter-spacing:.02em;
  background:var(--border);
  border-radius:4px;
  padding:.15rem .45rem;
}

/* ─── Cards ────────────────────────────────────────────── */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1rem;
}
.doc-card{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  text-decoration:none;
  color:inherit;
  transition:border-color var(--transition), box-shadow var(--transition), transform 100ms ease;
  box-shadow:0 1px 2px rgba(0,0,0,.04);

  /* staggered reveal — each card fades in sequentially */
  animation:fade-up .3s cubic-bezier(.25,.46,.45,.94) both;
}
/* stagger up to 12 cards */
.card-grid > *:nth-child(1){animation-delay:.04s}
.card-grid > *:nth-child(2){animation-delay:.08s}
.card-grid > *:nth-child(3){animation-delay:.12s}
.card-grid > *:nth-child(4){animation-delay:.16s}
.card-grid > *:nth-child(5){animation-delay:.20s}
.card-grid > *:nth-child(6){animation-delay:.24s}
.card-grid > *:nth-child(7){animation-delay:.28s}
.card-grid > *:nth-child(8){animation-delay:.32s}
.card-grid > *:nth-child(9){animation-delay:.36s}
.card-grid > *:nth-child(10){animation-delay:.40s}
.card-grid > *:nth-child(11){animation-delay:.44s}
.card-grid > *:nth-child(12){animation-delay:.48s}

.doc-card:hover{
  border-color:var(--amber);
  box-shadow:0 3px 12px rgba(184,118,31,.1), 0 0 0 1.5px var(--amber);
  transform:translateY(-1px);
}
.card-top{display:flex;align-items:center;gap:.5rem}
.badge{
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  padding:.15rem .5rem;
  color:var(--muted);
  font-weight:500;
}
.lang{
  font-family:var(--font-mono);
  font-size:.65rem;
  color:var(--amber);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.card-title{
  font-size:.97rem;
  font-weight:600;
  margin:0;
  line-height:1.35;
  color:var(--ink);
}
.card-date{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--muted);
}
.card-actions{
  display:flex;
  gap:.5rem;
  margin-top:.5rem;
}
.client-card{
  cursor:pointer;
  text-decoration:none;
}
.empty{
  color:var(--muted);
  background:var(--panel);
  border:1.5px dashed var(--border);
  border-radius:var(--radius);
  padding:3rem;
  text-align:center;
  font-size:.95rem;
}

/* ─── Doc Viewer ───────────────────────────────────────── */
.viewer-bar{gap:1rem}
.back{
  text-decoration:none;
  color:var(--muted);
  font-size:.85rem;
  font-weight:500;
  white-space:nowrap;
  transition:color var(--transition);
  letter-spacing:.01em;
}
.back:hover{color:var(--ink)}
.viewer-title{
  font-weight:600;
  font-size:.9rem;
  flex:1;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
}
.doc-frame{
  width:100%;
  height:calc(100vh - 57px);
  border:none;
  background:#fff;
  display:block;
}

/* ─── Keyframes ────────────────────────────────────────── */
@keyframes fade-up{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ─── Responsive ───────────────────────────────────────── */
@media(max-width:600px){
  .viewer-title{display:none}
  .library{padding:1.5rem 1rem 2.5rem}
  .topbar{padding:.75rem 1rem}
  .login-card{padding:2rem 1.5rem}
}
@media(max-width:380px){
  .card-grid{grid-template-columns:1fr}
}